AJAX in jsFiddle

Question

Come si simula jQuery $.get() per caricare dati da un dominio diverso in jsFiddle?

/* This won't work in jsFiddle. */  
$.get("http://www.google.com", function(data) { ... }); 

Come sappiamo, non v'è limitazione:

A causa di restrizioni di sicurezza del browser, la maggior parte delle richieste "Ajax" sono soggetti alla stessa politica di origine; la richiesta non può recuperare correttamente i dati da un dominio, sottodominio o protocollo diversi.

Answer 1

Se si sta semplicemente cercando di fare alcuni esempi è possibile utilizzare JSONP e l'API di Twitter a scopo di test. Se il tuo server supporta le richieste JSON, allora non penso che ci dovrebbe essere alcun problema.

Basta impostare il tipo di dati come JSON come illustrato di seguito

---

$.ajax("http://search.twitter.com/search.json", { 
    data: { 
     q: 'jquery' 
    }, 
    dataType: 'jsonp' 
}); 

Fa questo aiuto?

Answer 2

Check out How can I use the JSFiddle echo feature with JQuery?.

Controllare anche il loro API che fornisce esempi su come ottenere questo.

Answer 3

Ho risolto questo creando un violino in jsFiddle solo per testare carichi Ajax. Si ’ s alcuni molto semplice HTML con un'immagine e qualche copia — si può vedere qui:

<div class="container"> 
    <img id="picture" src="http://media.smashingmagazine.com/uploads/2012/01/best-of-no-150px.png" /> 

    <p>This post will help you get to know the iOS SDK a little better. It leads you through some choreographed steps of iOS app development, even if you have little or no programming knowledge. It covers some key principles and applies these directly to something useful and relevant: the creation of a simple but functioning portfolio app for the iPhone.</p> 
    <div style="clear: both;"></div> 
</div> 

body { 
    font-family: Arial; 
    color: #333333; 
    line-height: 1.4em; 
} 

img { 
    margin: 0 0 1em 1em; 
    padding: 1em; 
    background: #ffffff; 
    border: 1px solid #eaeaea; 
    display: inline-block; 
    float: right; 
     -moz-border-radius: 8px; 
     -webkit-border-radius: 8px; 
     border-radius: 8px; 

} 

.container { 
    background: #fafafa; 
    padding: 1em;   
} 

Demo on JS Fiddle.

Se si utilizza Firebug per fare clic sul frame del risultato “, è possibile ottenere l'URL di origine dell'iframe. Quando copi questo URL sorgente nel Fiddle contenente la tua richiesta Ajax, funzionerà perché ora si trova sullo stesso dominio. Qui ’ s una dimostrazione:

<div class="excontainer"> 
    <button id="loadbasic">basic load</button> 
    <div id="result"></div> 

</div> 

body { 
font-family: Arial; 
} 

.excontainer { 
    padding: 1em;  
} 

label { 
display: block; 
width: 100%; 
} 

p { 
padding: .5em; 
} 

a, a:visited { 
color: #2d9afd; 
} 

.changed { 
    color: #ff0099; 
} 

.highlight { 
    background: #faffda; 
} 

.entered { 
    color: #f5560a; 
} 

.green { 
color: #7fbf38; 
} 

.hellomouse, .clickable, #foo, #event { 
cursor: pointer; 
} 

button { 
margin-bottom: 1em; 
} 

div { 
    margin: 1em 0; 
} 

#foo { 
display: inline-block; 
} 



ul { 
margin: 1em 0; 
} 

.form, form, .stuff, .morestuff, stuff3 { 
    margin: 1em 0; 
    padding: 1em; 
    background: #ececec; 
} 

input { 
font-size: 1.1em; 
padding: 2px;  
} 

.placeholder { 
    color: #ff0099; 
    font-weight: normal; 
} 

::-webkit-input-placeholder { 
    color: #cccccc; 
} 

:-moz-placeholder { 
    color: #cccccc; 
} 

:-ms-input-placeholder { 
    color: #cccccc; 
} 

:focus::-webkit-input-placeholder { 
    color:transparent; 
} 

.content { 
    margin-top: 5px; 
    padding: 1em; 
    background: #eeeeee;  
} 

// learn jquery ajax 
// http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/ 

// no need to specify document ready 

$(function(){ 
    // don't cache ajax or content won't be fresh 
    $.ajaxSetup ({ 
     cache: false 
    }); 
    var ajax_load = "<img src='http://automobiles.honda.com/images/current-offers/small-loading.gif' alt='loading...' />"; 

    // load() functions 
    var loadUrl = "http://fiddle.jshell.net/deborah/pkmvD/show/"; 
    $("#loadbasic").click(function(){ 
     $("#result").html(ajax_load).load(loadUrl); 
    }); 

// end 
}); 

Demo on JS Fiddle.

Answer 4

Questo semplice esempio dovrebbe fare, provare lo fiddle.

È necessario creare un oggetto JSON che racchiude i dati effettivi in ​​un elemento json.

var callEcho = function(json) { 
    $.ajax({ 
     url: "/echo/json/", 
     type: "POST", 
     data: json 
    }).done(function(resp) { 
     console.log(resp); 
    }); 
}; 

$.get("http://echo.jsontest.com/key/value/one/two", function(data) { 
    var json = { 
     json: JSON.stringify(data) 
    }; 
    callEcho(json); 
});​