जेएसफ़िल्ड

Question

में AJAX jsFiddle में किसी भिन्न डोमेन से डेटा लोड करने के लिए आप jQuery $.get() को अनुकरण कैसे करते हैं?

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

हम जानते हैं, वहाँ सीमा है:

कारण ब्राउज़र सुरक्षा पाबन्दी के

, सबसे "अजाक्स" अनुरोध एक ही मूल नीति के अधीन हैं; अनुरोध किसी भिन्न डोमेन, सबडोमेन या प्रोटोकॉल से डेटा सफलतापूर्वक पुनर्प्राप्त नहीं कर सकता है।

Answer 1

यदि आप बस कुछ उदाहरण करने की कोशिश कर रहे हैं तो आप परीक्षण प्रयोजनों के लिए JSONP और ट्विटर एपीआई का उपयोग कर सकते हैं। यदि आपका सर्वर JSON अनुरोधों का समर्थन करता है, तो मुझे नहीं लगता कि कोई समस्या होनी चाहिए।

बस JSON के रूप में डेटा प्रकार के रूप में नीचे

---

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

से पता चला इस मदद करता है सेट?

Answer 2

How can I use the JSFiddle echo feature with JQuery? देखें।

इसके अलावा API देखें जो यह प्राप्त करने के लिए उदाहरण देता है।

Answer 3

मैंने इसे अजाक्स लोड का परीक्षण करने के लिए जेएसफ़िल्ड में एक पहेली बनाकर हल किया। यह ’ कुछ एक छवि और कुछ प्रतिलिपि — आप इसे यहाँ देख सकते हैं के साथ बहुत ही सरल 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।

यदि आप “ परिणाम ” फ्रेम पर क्लिक करने के लिए फ़ायरबग का उपयोग करते हैं, तो आप iframe का स्रोत URL प्राप्त कर सकते हैं। जब आप इस स्रोत यूआरएल को अपने अजाक्स अनुरोध वाले फीडल में कॉपी करते हैं, तो यह काम करेगा क्योंकि अब यह एक ही डोमेन पर है।

<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 ऑब्जेक्ट बनाना होगा।

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