jsFiddle中的AJAX

发布时间：2020-12-16 02:53:01 所属栏目：百科来源：网络整理

导读：你如何模拟jQuery $.get() 从jsFiddle中的不同域加载数据？ /* This won't work in jsFiddle. */ $.get("http://www.google.com",function(data) { ... } ); 我们知道,有限制： Due to browser security restrictions,most “Ajax” requests are subject to

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

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

我们知道,有限制：

Due to browser security restrictions,most “Ajax” requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain,subdomain,or protocol.

解决方法

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!