jsFiddleのAJAX

Question

jsFiddleの別のドメインからデータを読み込むためにjQuery $.get()をどのようにシミュレートしますか？

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

私たちが知っているように、制限があります：

が原因ブラウザのセキュリティ制限のために、最も「アヤックス」の要求は、同一生成元ポリシーの対象となります。要求は別のドメイン、サブドメイン、またはプロトコルからデータを正常に取得できません。

Answer 1

単純にいくつかの例を試してみると、テストの目的でJSONPとtwitter apiを使用できます。あなたのサーバーがJSONリクエストをサポートしている場合、私は何か問題があるとは思わない。

---

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

下に示すように、ちょうどこのヘルプをいJSONなどのデータタイプを設定しますか？

Answer 2

チェックアウトHow can I use the JSFiddle echo feature with JQuery?。

これを実現する方法の例を示すAPIもチェックしてください。

Answer 3

私はAjaxのロードをテストするためにjsFiddleにFiddleを作成することでこれを解決しました。それ’のイメージといくつかの非常に単純な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：ここ’はデモです。

Answer 4

この簡単な例では、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); 
});​