2

jsonでデータを返すAPIを作成しました。次に、データを受信して​​ページで使用することでAPIをテストするアプリを作成しています。しかし、私のajaxコード（以下を参照）は何らかの理由で失敗し、エラーは「エラー」（エラー：エラー）とだけ表示されます。

コードの何が問題になっている可能性がありますか？

コード：

    $.ajaxSetup ({
      url: "http://localhost:8000/products", // <--- returns json
      type: "GET",
      headers:{
        "Accept":"application/json",
        "Content-type":"application/x-www-form-urlencoded"
      }
    })
    $.ajax({
        success: function(data){
            console.log("You made it!");
        },
        error: function(xhr) {
           console.log("Error: " + xhr.statusText);
       }
    }).done(function(data){
        console.log(data);
    })

これは私がChromeで取得する情報です（インスペクター->ネットワーク）：

名前： products localhost /、メソッド： GET、ステータス:(キャンセル）、タイプ：保留中、イニシエーター： jquery-latest.js：8434スクリプト、サイズ： 13B 0B、時間： 95ms0。0日

4

5 に答える 5

10

おそらく問題は何ですか

私はここであなたの問題を知っていると思います。あるプロトコル+ドメイン+ポート（例： ""）でページを読み込んでいるようですがhttp://localhost/、別のプロトコル、ドメイン、またはポート（この場合はポートのみが異なる： " http://localhost:8000/products"）に対してAJAXリクエストを呼び出します。

このようにして、ブラウザのセキュリティ機能である同一生成元ポリシーの制限に達している可能性があります。このような場合、ブラウザは特定のリクエストが「キャンセル」されたことを示す場合があります（ブラウザがそれをブロックしたため）。

解決

問題には複数の解決策があります。

  • （最も簡単）元のサイトとAJAXによって要求されたエンドポイントの両方で同じプロトコル+ドメイン+ポートに固執します。
  • （2番目に簡単）サーバー上にエンドポイントを構築します。たとえば、" "はバックグラウンドでhttp://localhost/products""を呼び出しhttp://localhost:8000/products、その応答を返します（SOPのウォークアラウンドとして）。
  • JSONP、CORSなどのより複雑なソリューション（詳細はこちら：https ：//stackoverflow.com/a/8467697/548696 ）、
于 2012-12-15T17:51:27.867 に答える
5 
$.ajax({
    /* ajax options omitted */
    error: function (xmlHttpRequest, textStatus, errorThrown) {
         if(xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0) 
              return;  // it's not really an error
         else
              // Do normal error handling
});
于 2012-12-15T13:23:44.793 に答える
2

ただ使ってみてください

$.ajax({
  url: "http://localhost:8000/products", 
  dataType: 'json',
  success: function(data){
            console.log("You made it!");
        },
        error: function(xhr) {
           console.log("Error: " + xhr.statusText);
       }
});

完了したコールバックを使用する代わりに、成功または完全なコールバック内のコード行を使用できます。その非常にシンプルでクリーン。

于 2012-12-15T13:32:55.223 に答える
0

2つのajax呼び出しを1つにマージしてみませんか。また、変更してみてくださいtype = "POST" 

$.ajax({
    type: "POST",
    url: "http://localhost:8000/products",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data){alert(data);},
    error: function(errMsg) {
        alert(errMsg);
    }
});
于 2012-12-15T13:23:04.073 に答える
0

お使いのブラウザがエラーをキャッシュしたか、ヘッダーの適切な設定に問題がある可能性があるため、この方法を次の場所に追加してみてください$.ajaxsetup()。

    $.ajaxSetup ({
      url: "http://localhost:8000/products", // <--- returns json
      type: "GET",
      dataType: 'json',
      cache: false,
      contentType: "application/json"
    });

この方法を一度試して、機能するかどうかを確認してください。

于 2012-12-15T13:55:48.923 に答える