AJAX in jsFiddle

Question

How do you simulate jQuery $.get()to load data from another domain into jsFiddle?

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

As you know, there is a limitation:

Due to browser security restrictions, most Ajax requests are subject to the same origin policy; The request cannot successfully retrieve data from another domain, subdomain, or protocol.

Answer 1

I solved this by creating a Fiddle in jsFiddle just for testing Ajax loads. This is very simple HTML with an image and some copy; you can see it here:

<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 script .

Firebug, "", URL- iframe. URL- Fiddle, Ajax, , . :

<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  
});

JS.

Answer 2

JSFiddle JQuery?.

API, , .

Answer 3

, fiddle.

JSON, 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);
});​ 

Answer 4

If you are just trying to make some examples, you can use JSONP and twitter api for testing. If your server supports JSON requests, I don't think there should be a problem.

Just set the data type as JSON as shown below.

---

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

Does it help?