AJAX trong jsFiddle

Question

Làm thế nào để bạn mô phỏng jQuery $.get() để tải dữ liệu từ một miền khác trong jsFiddle?

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

Như chúng ta đã biết, có giới hạn:

Do hạn chế bảo mật trình duyệt, hầu hết các "Ajax" yêu cầu phải tuân thủ các chính sách cùng một nguồn gốc; yêu cầu không thể truy xuất thành công dữ liệu từ miền, tên miền phụ hoặc giao thức khác.

Answer 1

Nếu bạn chỉ đơn giản là cố gắng thực hiện một số ví dụ, bạn có thể sử dụng JSONP và api twitter cho mục đích thử nghiệm. Nếu máy chủ của bạn hỗ trợ các yêu cầu JSON, thì tôi không nghĩ rằng có bất kỳ vấn đề gì.

Chỉ cần thiết lập kiểu dữ liệu như JSON như hình dưới đây

---

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

Liệu sự giúp đỡ này?

Answer 2

Khám phá How can I use the JSFiddle echo feature with JQuery?.

Ngoài ra, hãy xem API của chúng tôi, ví dụ về cách đạt được điều này.

Answer 3

Tôi đã giải quyết vấn đề này bằng cách tạo một Fiddle trong jsFiddle chỉ để kiểm tra tải Ajax. Nó ’ s một số HTML rất đơn giản với một hình ảnh và một số bản sao — bạn có thể nhìn thấy nó ở đây:

<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.

Nếu bạn sử dụng Firebug để nhấp vào kết quả “ ”, bạn có thể lấy URL nguồn của khung nội tuyến. Khi bạn sao chép URL nguồn này vào Fiddle chứa yêu cầu Ajax của bạn, nó sẽ hoạt động vì bây giờ nó nằm trên cùng một miền. Dưới đây ’ là một cuộc biểu tình:

<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

Ví dụ đơn giản này nên làm, hãy thử fiddle.

Bạn cần phải tạo đối tượng JSON bao quanh dữ liệu thực tế của mình trong phần tử 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); 
});​