jsFiddle 中的 AJAX

Posted 2023-02-27

【中文标题】jsFiddle 中的 AJAX

【英文标题】：AJAX in jsFiddle

【发布时间】：2012-02-21 03:35:05

【问题描述】：

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

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

众所周知，有限制：

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

【参考方案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;        

Demo on 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  
);

Demo on JS Fiddle.

【参考方案2】：

查看How can I use the JSFiddle echo feature with JQuery?。

还可以查看他们的API，它提供了如何实现这一目标的示例。

【参考方案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);
);​ 

【参考方案4】：

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

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

---

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

这有帮助吗？

【讨论】：

$.get() 可以正常工作。我只是太习惯使用 ajax 功能了。

他要的是 JSFiddle。 JSFiddle 不允许这样做。

@jostster 你的意思是说jsfiddle不允许我提到的twitter url吗？