2

こんにちは、次の手順に従って、jQuery を使用して ajax 呼び出しを実行しようとしています: http://data.hud.gov/housing_counseling.html

しかし、これはクロスドメイン リクエストなので、jsonp を実行する必要があります (知識がありません)。

調査の後、私は 2 つの方法で呼び出しを行いましたが、エラーが発生し続け、データはブラウザーのどこかにありますが、アクセス方法がわかりません。

URL のコールバック パラメータに注意してください (含めない場合、Origin is not allowed by Access-Control-Allow-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 のようなコールバックパラメータのランダムなコールバック名を取得します。キー値のペア。

ここに画像の説明を入力

$.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 応答が表示されます

ここに画像の説明を入力

成功した応答を取得し、明らかにブラウザーのどこかにある JSON データを操作するには、応答をどのように処理する必要がありますか?

ありがとうございました

4

1 に答える 1

0

更新された回答

私が経験していた問題は、ブラウザーの制限が原因でした (私はそれを知っていましたが、回答を作成するには、この事実を明確にする必要があると感じています)。これにより、別のドメインから ajax 経由でコンテンツを読み込むことができなくなります (つまり、クロス ドメイン リクエスト)。

クロスドメイン ajax の制限についての適切で簡単な説明については、次の優れた記事を参照してください。公開ヘッダー

データを取得していると思っていましたが、ブラウザのどこかにあると思いました。データを取得していませんでした。応答サーバーからリダイレクトされた Web ページのコンテンツが表示されていました。これを明確に説明していない場合は、気にしないで先に進んでください。

これを機能させるには、3 つのファイル、つまり、ajax 呼び出しをトリガーする html、スクリプトを含む js ファイル、および (VIP) 要求を作成し、$.ajax を満たすように要求をフォーマットするファイルを使用する必要があります。 () 仕様 (私は 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 に挿入することができます

ここに画像の説明を入力

于 2013-11-15T17:20:28.597 に答える