ajax - jsFiddle 中的 AJAX

Question

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

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

众所周知，有以下限制：

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

Answer 1

我通过在 jsFiddle 中创建一个 Fiddle 来解决这个问题，只是为了测试 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 点击“结果”框架，可以得到 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  
});

JS Fiddle 上的演示。

Answer 2

查看如何在 JQuery 中使用 JSFiddle 回显功能？.

还可以查看他们的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

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

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

---

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

这有帮助吗？