获取并显示 jQuery GET 请求的结果答案

【问题标题】：Retrieve and display results of jQuery GET request获取并显示 jQuery GET 请求的结果
【发布时间】：2013-04-09 17:42:25
【问题描述】：

我正在尝试从 ESV API 检索和显示数据：http://www.esvapi.org/
它适用于 codecademy.com 域，但不适用于 esvapi.org 域。
见小提琴：http://jsfiddle.net/BinaryAcid/yqCcn/

<input type="button" value="get data" id="btn" >

$("#btn").click(function() {

    var response = '';
    $.ajax({ type: "GET",   
        // url: "http://www.esvapi.org/v2/rest/passageQuery?key=IP&passage=John+1",
        url: "http://www.codecademy.com/",
        async: false,
        success : function(text)
        {
         response = text;
        }
    });

    document.write(response);

});

【问题讨论】：

尝试将以下内容添加到您的 Ajax 调用中：dataType:"jsonp"
也许你需要凭据或者只是调整标题..
页面加载后不能使用 document.write。它会做一些讨厌的事情，比如替换所有页面内容。如果您正在调试，请使用控制台。
请在评论前先尝试 Fiddle。它现在可以在一个域上运行。我只需要找出为什么它不能在另一个域上运行。在这个例子中，document.write 很好。

标签： javascript jquery ajax api get

【解决方案1】：

我尝试了小提琴示例，但不适用于第一个或第二个 URL，问题与跨域调用有关，除非您使用 jsonp，否则您不能直接调用不在您自己域上的服务或在您的服务器中设置一些标头明确允许跨域调用（此技术在 IE 中不起作用）

【讨论】：

【解决方案2】：

这行得通。见 jsfiddle：http://jsfiddle.net/BinaryAcid/qDrw8/1/

<input type="button" value="get data" id="btn" >

$("#btn").click(function() {
reference='Jhon+1'
$.getJSON('http://www.esvapi.org/crossref/ref.php?reference=' + reference + '&callback=?',
    function(text){
        if(text){
            $('body').html(text.content);
        } else {
            $('body').html('Error');
        }
    });
});

【讨论】：

【解决方案3】：

使用 Yahoo 查询语言 (YQL) 的解决方案。见 jsfiddle：http://jsfiddle.net/BinaryAcid/jbCuH/1/

<input type="button" value="get data" id="btn">

$("#btn").click(function () {
var response = '';
var url = "http://www.esvapi.org/v2/rest/passageQuery?key=IP&passage=John+1";
var yql = "select content from data.headers where url='" + url + "'";
$.ajax({
    type: "GET",
    url: "http://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent(yql) + "&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=?",
    async: false,
    dataType: "json",
    success: function (data) {
        response = data.query.results.resources.content;
        document.write(response);
    }
});

});

【讨论】：