在jsFiddle中使用AJAX

Question

如何在jsFiddle中模拟jQuery $.get() 以从不同的域加载数据？

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

众所周知，有限制：

由于浏览器安全限制，大多数“Ajax”请求受到同源策略的限制；即请求无法成功地从不同的域、子域或协议中检索数据。

- moey

Answer 1

我通过在jsFiddle中创建一个用于测试Ajax加载的代码片段来解决了这个问题。这是一些非常简单的HTML，包括一张图片和一些文字 — 你可以在这里看到:

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

JS Fiddle演示。

如果您使用Firebug点击“result”框架，您可以获取iframe的源URL。将此源URL复制到包含Ajax请求的Fiddle中，它将起作用，因为现在它位于同一域上。以下是一个演示：

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

- Deborah

Answer 2

请查看如何使用JSFiddle回声功能与JQuery一起使用？

还可以查看他们的API，该API提供了实现此目的的示例。

- Bot

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

- Eat at Joes

Answer 4

如果你只是想做一些示例，可以使用JSONP和Twitter API进行测试。如果你的服务器支持JSON请求，那么我认为不应该有任何问题。

只需将数据类型设置为JSON，如下所示：

---

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

这有帮助吗？

- Ryan

---

$.get() 将可以正常工作。我只是太习惯使用 ajax 函数了。 - Ryan

他正在要求使用JSFiddle。但JSFiddle不允许这样做。 - Bot

@jostster，您的意思是说jsfiddle不允许我提到的Twitter网址吗？ - Ryan