jQueryを使用してJSONからデータにアクセスする

ネイト・ドッグ

このJSON応答の反復を提供するコードのヘルプが必要です。

JSON応答:

[{"id":"1","FK_country":"USA","FK_state":"Arizona","FK_city":"Phoenix","zip":"85001","update_by":"SYSTEM","update_when":"0000-00-00 00:00:00"},
{"id":"2","FK_country":"USA","FK_state":"Arizona","FK_city":"Phoenix","zip":"85002","update_by":"SYSTEM","update_when":"0000-00-00 00:00:00"},
{"id":"3","FK_country":"USA","FK_state":"Arizona","FK_city":"Phoenix","zip":"85003","update_by":"SYSTEM","update_when":"0000-00-00 00:00:00"}]

以下の提案の助けを借りて私が更新したコードは

function test3 () 
{

    var myCriteria = "";

    var key = "mykey";

    myCriteria = $( "#city" ).val();

    $('#myTestDiv').empty().append(myCriteria);

    var myDataRequest = $.ajax({
                url: 'ajx_zip.php',
                type: 'POST',
                dataType: 'json',
                data: {city:myCriteria, api_key:key},
                success: function(myData)
                {
                    alert( "Data Request Success!" );

                    $('#zip')
                    .find('option')
                    .remove()
                    .end();

                    $( "#myTestDiv" ).append( "<p>" + myData + "</p>" );

                    var myNewData = $.parseJSON(myData);

                    $( "#myTestDiv" ).append( "<p>" + myNewData + "</p>" );

                    $.each(myNewData, function(i, value) 
                    {
                    $('#zip').append($('<option></option>').val(value.FK_city).html(value.FK_city));
                    });
                }

        });

    myDataRequest.fail(function(jqXHR, textStatus)
    {
    if (jqXHR.status === 0)
    {
        alert('Not connect.n Verify Network.');
    }
    else if (jqXHR.status == 404)
    {
        alert('Requested page not found. [404]');
    }
    else if (jqXHR.status == 500)
    {
        alert('Internal Server Error [500].');
    }
    else if (exception === 'parsererror')
    {
        alert('Requested JSON parse failed.');
    }
    else if (exception === 'timeout')
    {
        alert('Time out error.');
    }
    else if (exception === 'abort')
    {
        alert('Ajax request aborted.');
    }
    else
    {
        alert('Uncaught Error.n' + jqXHR.responseText);
    }
    });

 }

これに関する提案から更新したHTMLコードは次のとおりです。

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script language="javascript" src="select.js"></script>
</head>

<body>

<h3>Test Address for Javascript</h3>

<FORM name="address" action="testresult.php" method="POST" >

<SELECT  ID="country" NAME="country" >
<Option value="">Select Country</option>
<Option value="USA">United States</option>
<Option value="CAN">Canada</option>
</SELECT>

<br><br>

<SELECT id="state" NAME="state">
<Option value="Arizona">Arizona</option>
<Option value="California">California</option>
</SELECT>

<br><br>

<SELECT id="city" NAME="city" onchange="test3();">
<Option value="Phoenix">Phoenix</option>
<Option value="Glendale">Glendale</option>
<Option value="Chandler">Chandler</option>
<Option value="California">California</option>
</SELECT>

<br><br>

<SELECT id="zip" NAME="zip">
<Option value="Select Zip">Select Zip</option>
</SELECT>

</form>

<div id="myTestDiv"></div>
</body>

</html>

さらに、同じサーバーからPHP処理ページへの単純なhtml形式のPOSTテストを作成し、APIをテストするために作成されたクライアント側のパフォーマンスを高速化する限られたデータセットを作成しました。この投稿の上部(「結果」ページのエコー)。ただし、$。parseJSONレベルでのJavascript関数内のJSONオブジェクトの処理でエラーが発生するようになりました。テスト出力DIVで、追加された出力は次のとおりです。

Chandler
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
イアゼル

これを置き換えます:

<SELECT id="city" NAME="city" onselect="AddZipOptions();">

これとともに:

<SELECT id="city" NAME="city" onchange="AddZipOptions();">

onSelect マウスでテキストを選択すると発生するイベントです。

結果を追加する前に、zipselectもクリーンアップする必要があります。

$("#zip").children(':not(:first)').remove()
$("#zip").append($('<option>', {text: result.zip, value: result.zip}));

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

jQueryを使用してJSONからデータにアクセスする

分類Dev

Swiftを使用してAFNetworkingからJSONデータにアクセスする

分類Dev

Swiftyjsonを使用してアレイからデータにアクセスする

分類Dev

javaScriptを介してjsonからデータにアクセスする方法は?

分類Dev

提供されたjsonファイルから.getJSONを使用してJsonデータにアクセスする

分類Dev

jspを使用してリストからデータにアクセスする

分類Dev

anglejsを使用してjsonデータにアクセスする

分類Dev

ViewModelとIDを使用してROOMDBからデータにアクセスする

分類Dev

HTMLからFormBuilderを使用してデータにアクセスする

分類Dev

GoogleClosureを使用してLabelInputからデータにアクセスする

分類Dev

Angularを使用してExpressから応答データにアクセスする

分類Dev

Javaを使用してPythonGAEデータストアからデータにアクセスする

分類Dev

NSDictionaryを使用してJSONデータからすべてのインデックスセットにアクセスする方法

分類Dev

sqliteを使用してデータベースからデータにアクセスする方法

分類Dev

Excelから値を挿入してJavaを使用してデータベースにアクセスする

分類Dev

jqueryまたはjavascriptを使用してネストされたJSONデータにアクセスしますか?

分類Dev

PHP OOPを使用して親クラスから子クラスデータにアクセスする

分類Dev

javascriptを使用してJSONデータベースにアクセスする方法

分類Dev

jqueryを使用してページに追加するjsonデータにアクセスするにはどうすればよいですか?

分類Dev

jqueryjsonpを使用してCourseraAPIからデータにアクセスします

分類Dev

cURLを使用してAPIからJSONにアクセスする

分類Dev

jQueryを使用してデータ属性の値にアクセスする方法

分類Dev

phpを使用してmysqlデータベースから特定の値にアクセスする方法は?

分類Dev

JavascriptのNasaNeoAPIからネストされたforループを使用してデータにアクセスする

分類Dev

Entityfrmeworkを使用してAsp.netcoreからデータベースにアクセスする方法

分類Dev

テキストボックスからデータを挿入して、c#のwhereを使用してデータベースにアクセスする方法

分類Dev

d3を使用してJSONデータにアクセスする方法は?

分類Dev

OAuth2.0を使用してAzureB2CADからユーザーデータにアクセスする

分類Dev

IOS:tableviewを使用して、didSelectRowAtIndexPathからデータオブジェクトにアクセスする方法

Related 関連記事

  1. 1

    jQueryを使用してJSONからデータにアクセスする

  2. 2

    Swiftを使用してAFNetworkingからJSONデータにアクセスする

  3. 3

    Swiftyjsonを使用してアレイからデータにアクセスする

  4. 4

    javaScriptを介してjsonからデータにアクセスする方法は?

  5. 5

    提供されたjsonファイルから.getJSONを使用してJsonデータにアクセスする

  6. 6

    jspを使用してリストからデータにアクセスする

  7. 7

    anglejsを使用してjsonデータにアクセスする

  8. 8

    ViewModelとIDを使用してROOMDBからデータにアクセスする

  9. 9

    HTMLからFormBuilderを使用してデータにアクセスする

  10. 10

    GoogleClosureを使用してLabelInputからデータにアクセスする

  11. 11

    Angularを使用してExpressから応答データにアクセスする

  12. 12

    Javaを使用してPythonGAEデータストアからデータにアクセスする

  13. 13

    NSDictionaryを使用してJSONデータからすべてのインデックスセットにアクセスする方法

  14. 14

    sqliteを使用してデータベースからデータにアクセスする方法

  15. 15

    Excelから値を挿入してJavaを使用してデータベースにアクセスする

  16. 16

    jqueryまたはjavascriptを使用してネストされたJSONデータにアクセスしますか?

  17. 17

    PHP OOPを使用して親クラスから子クラスデータにアクセスする

  18. 18

    javascriptを使用してJSONデータベースにアクセスする方法

  19. 19

    jqueryを使用してページに追加するjsonデータにアクセスするにはどうすればよいですか?

  20. 20

    jqueryjsonpを使用してCourseraAPIからデータにアクセスします

  21. 21

    cURLを使用してAPIからJSONにアクセスする

  22. 22

    jQueryを使用してデータ属性の値にアクセスする方法

  23. 23

    phpを使用してmysqlデータベースから特定の値にアクセスする方法は?

  24. 24

    JavascriptのNasaNeoAPIからネストされたforループを使用してデータにアクセスする

  25. 25

    Entityfrmeworkを使用してAsp.netcoreからデータベースにアクセスする方法

  26. 26

    テキストボックスからデータを挿入して、c#のwhereを使用してデータベースにアクセスする方法

  27. 27

    d3を使用してJSONデータにアクセスする方法は?

  28. 28

    OAuth2.0を使用してAzureB2CADからユーザーデータにアクセスする

  29. 29

    IOS:tableviewを使用して、didSelectRowAtIndexPathからデータオブジェクトにアクセスする方法

ホットタグ

アーカイブ