jsFiddle中的AJAX

您如何模拟jQuery $.get() 从jsFiddle中的其他域加载数据？

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

众所周知，存在局限性:

最佳答案

我通过在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。

关于jsFiddle中的AJAX，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9045274/