AJAX в jsFiddle

Question

Как вы моделируете jQuery $.get() для загрузки данных из другого домена в jsFiddle?

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

Как мы знаем, есть ограничение:

Из-за ограничений безопасности браузера большинство запросов «Ajax» подчиняются одной и той же политике происхождения;запрос не может успешно получить данные из другого домена, субдомена или протокола.

Answer 1

Я решил эту проблему, создав Fiddle в jsFiddle только для тестирования Ajax-загрузок. Это очень простой HTML-код с изображением и копией & mdash; Вы можете увидеть это здесь:

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

Демонстрация на JS Fiddle .

Если вы используете Firebug, чтобы нажать на & ldquo; результат & rdquo; кадр, вы можете получить исходный URL-адрес iframe. Когда вы копируете этот исходный URL в Fiddle, содержащий ваш Ajax-запрос, он будет работать, потому что теперь он находится в одном домене. Вот демонстрация:

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

Демонстрация JS Fiddle .

Answer 2

Извлечение Как я могу использовать функцию эха JSFiddle с JQuery? .

Также ознакомьтесь с их API , в котором приведены примеры того, как этого добиться.

Answer 3

Это простой пример, попробуйте скрипка .

Вам необходимо создать объект 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);
});​ 

Answer 4

Если вы просто пытаетесь сделать несколько примеров, вы можете использовать JSONP и твиттер API для тестирования.Если ваш сервер поддерживает запросы JSON, то я не думаю, что возникнут какие-либо проблемы.

Просто установите тип данных как JSON, как показано ниже

---

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

помочь?