2016-08-09 5 views
0

JSON応答解析できないコードに示すようにAjaxリクエストが、私はここにコードをテストしてい

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
var processJSON = function(data, textStatus, xhr) { 
     alert(xhr.status); 
    } 
// for whatever reason, the following URL is not working any more, so you won't be able to test it anymore. 
    var myURL='https://ckeqt3eoea.execute-api.us-east-1.amazonaws.com/pettest/test?name=223'; 
// var myURL="https://jsonplaceholder.typicode.com/users" 

    $("button").click(function(){ 
     $.ajax({ 
      url: myURL, 
      dataType: "json", 
      contentType: 'application/json', 
      success: processJSON 
     }); 


    }); 
}); 
</script> 
</head> 
<body> 

<button>Send Request</button> 

</body> 
</html> 

を、私は解析しようとしていますこのURLからの応答: https://ckeqt3eoea.execute-api.us-east-1.amazonaws.com/pettest/test?name=223

そして、あなたが直接そのURLにアクセスして、AWS-API-Gatewayからの応答が単純であることを知ることができます。

{ 
"cc":"dd", 
"name":"ee" 
} 

他のソースからの他のjson応答を解析するために上記のjavascriptを使用することができました。しかし私はAWS-API-Gatewayから上記の応答を解析しようとしている私の髪を引っ張っている。 var myURLの2行目のコメントを外すと、コードが他のURLに対して実際に機能することがわかります。既存の回答を受けて

==========

  • 私はjsonjsonpの両方を試してみました。どちらも他のURL(私がコメントしたものを含む)で働いていました。しかし、いずれもAWS Gateway APIでは機能しません。
  • また、名前付き関数を使用するようにコードを更新しました。しかし、やはり他のURLでは有効ですが、AWS URLでは機能しません。
  • 私はFirefoxとSafariでテストしました。
+1

あなたのAPIは現在CORSをサポートするように設定されていない可能性があります。これはURLを直接入力するとJSONがブラウザに出力される理由を説明しますが、別のクライアントアプリケーションからサーバーに要求を行うと、あなたのデータオブジェクトで。 AWSでCORSを受け入れるようにAPIを設定してください – Alex

答えて

2

を埋め込みます。あなたはjQueryにjsonpコールバックを期待するように指示しています。あなたが探しているのはdataType: "json"です。


UPDATE

私はちょうどあなたのコードをテストしました。問題は、あなたのpettest/testリソースでOPTIONSメソッドが定義されていないことです。 APIゲートウェイコンソールを使用して、テストリソースを開きます(pettestがステージで、テストがリソースであると仮定します)。次に、[アクション]ドロップダウンボタンを使用してCORSを有効にします。これによりOPTIONSメソッドが自動的に作成され、必要なヘッダがGETメソッドに設定されます。

+0

私は 'jsonp'と' json'の両方を試しました。両方とも私が試した他のURLのために働く。しかしどちらもAWSゲートウェイAPIレスポンスのためには機能しません。 – user2868104

+2

私はあなたのコードをテストしました。問題は、あなたのpettest/testリソースでOPTIONSメソッドが定義されていないことです。 APIゲートウェイコンソールを使用して、テストリソースを開きます(pettestがステージで、テストがリソースであると仮定します)。次に、[アクション]ドロップダウンボタンを使用してCORSを有効にします。これによりOPTIONSメソッドが自動的に作成され、必要なヘッダがGETメソッドに設定されます。 –

+0

ありがとう、それは今働いています。元の回答に上記の回答を追加できますか?私は正しい答えとしてそれを選びたいと思います。 – user2868104

0

あなたのAPIを使用してくれました。おそらく問題はありませんが、変数ラベルに 'resp'を使用する代わりに 'data'を使用しました。また

、それはデータの種類だという名前の関数を呼び出すのではなく、関数のインライン

function processJSON(data) { 
     alert(data.name); 
    } 

      dataType: "json", 
      contentType: 'application/json', 
+0

まだ私のために働いていません。繰り返しますが、あなたの変更と元のコードは、私が試した他のURLではなくAWSのURLで動作します。 (他のURLの1つは上記のコード例 '// var myURL'にコメントされています) – user2868104

+0

私はあなたのURLを呼び出しました。ブラウザからURLをヒットすると、期待されるJSONが戻ってきますか?これを試してみてください: 'alert(JSON.stringify(data、null、4));' – Mike

関連する問題