Question

您好我正在尝试按照以下说明使用jQuery进行ajax调用：http://data.hud.gov/housing_counseling.html

但由于这是一个跨域请求，我需要做jsonp（不了解它）

经过研究，我已经通过两种方式完成了调用，并且我一直收到错误，数据在浏览器的某处，但我不知道如何访问它。

请注意url上的回调参数（如果我不包含它，则Access-Control-Allow-Origin不允许使用Origin。）

第一个电话：

function loadJson() 
    {
        var statesurl = "http://data.hud.gov/Housing_Counselor/search?AgencyName=&City=&State=CA&jsoncallback=?"
        $.getJSON(statesurl, null, function(result){


        }).done(function(result) {

            var items = [];
            $.each( result, function( key, val ) {
                items.push( "<li id='" + key + "'>" + val + "</li>" );
                console.log(key + ": " + val)
            });

            $( "<ul/>", {
                "class": "my-new-list",
                html: items.join( "" )
            }).appendTo( "div#thestates" ); 

        }).fail(function() {
            console.log( "error" );
        })
    }

$( "#loadstates" ).click(function() { loadJson()});

我得到回调参数的随机回调名称，例如http://data.hud.gov/Housing_Counselor/search?AgencyName=&City=&State=CA&jsoncallback=jQuery19107074434771202505_1384407999935&_=1384407999936通过Chrome控制台我可以看到响应是带有键值对的JSON数据。

enter image description here

如果我用$ .ajax尝试调用，那么$ .ajax调用也会发生同样的事情：

function loadJsonP() 
{
    var statesurl = "http://data.hud.gov/Housing_Counselor/search?AgencyName=&City=&State=CA&jsoncallback=?"
    $.ajax({
        url:statesurl,
        dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
        success:function(json){
             // do stuff with json (in this case an array)
             console.log(json_encode(json))
        },
        error:function(){
            console.log("Error");
        },
    });
}

我得到的回答与上面说明的类似。虽然对于console.log输出都是“错误”但我看到200响应

enter image description here

我应该如何处理响应以获得成功的响应并操纵JSON数据，这显然位于浏览器中的某个位置

谢谢

Answer 1

更新的答案

我遇到的问题是由于我的浏览器的限制（我知道，但是为了开发我的答案，我觉得我必须澄清这个事实），这会阻止通过ajax从另一个域加载内容（即跨域请求）。

为了更好地解释跨域ajax限制，您可以阅读这篇优秀的文章：https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control#Access-Control-Expose-Header

我以为我正在获取数据，而我虽然它在浏览器中的某个地方。我没有收到数据，我看到了从响应服务器重定向的网页内容。如果我没有清楚地解释清楚，请不要紧，继续前进。

为了使这项工作，我必须使用3个文件，我触发ajax调用的html，我有脚本的js文件，以及（VIP）发出请求的文件并格式化请求以满足$ .ajax（）specs（我正在使用PHP）

javascript文件：

$( document ).ready(function() {

    if (!(window.jQuery)) {  
        console.log('JQUERY NOT LOADED');
    }

    function loadJsonP(parametrizedurl) 
    {

        $.ajax({
            type: 'GET',
            url: "cors.php?" + parametrizedurl, // notice I will call a file in my own domain, and append the parametrized url as per API specs
            dataType: 'jsonp',  // data type jsonp (i.e., padded json)
            jsonp: 'jsonp_callback', // jsonp_callback is part of the parametrizedurl, and when it gets passed on the url, a random function is generated and appended. You would see something similar to this jQuery19103874713401310146_1385178790322
            complete: function(var_x){

                console.log('COMPLETE');
                console.log(this);
                console.log(var_x);

            },          
            success: function (data) {
                console.log('SUCCESS');
                console.log(data);
                $("#thestates").append(data);               
            },
            error: function(xhr, textStatus, errorThrown) {

                console.log('ERROR');
                console.log('textStatus: ' + textStatus);
                console.log('xhr: ' + xhr);
                console.log('errorThrown: ' + errorThrown);

            }
        });
    }

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

        var bystate = "url=http://data.hud.gov/Housing_Counselor/search&AgencyName=&City=&State=CA&jsonp_callback="  // notice I included the parameter jsonp_callback and left the value empty

        loadJsonP(bystate);

    });

});

此文件由此html文件调用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Cross Domain Ajax Call</title>

        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/JavaScript" src="cfpb.js"></script>
    </head>
    <body>
        <div id="myDiv"><h2>Generate a List</h2></div>
        <button type="button" value="Submit" id="loadstates">Load</button>
        <div id="thestates"></div>
    </body>
</html>

当我执行单击按钮时，对我自己的服务器上的cors.php文件进行ajax调用：

<?php
    if(isset($_GET)){

        $theurl = $_GET['url'].'/?';
        array_shift($_GET); // I remove the url parameter to easily create the parameter part of the url 

        $theurl .= http_build_query ($_GET); 

        $fhandle = fopen($theurl, 'r'); // I begin to read each line served to me by the API
        $data = array();

        $i = 0;         
        while(($buffer = fgets($fhandle)) !== false)
        {
            $temparray = explode(';',$buffer);
            $data[$i] = $temparray;
            $i++;
        }

        fclose($fhandle);

        $data = json_encode($data);

        echo $_GET['jsonp_callback']."(".$data.")"; // this results in the formatted json data PADDED (i.e., jsonp) by the autogenerated jsonp_callback value by the brower (i.e., jQuery19103874713401310146_1385178790322) 

    }

?>

在这个例子中，我可以通过Chrome的控制台看到数据数组并插入页面div #thestates

enter image description here

jquery跨域ajax和getJson返回错误

1 个答案: