使用 jQuery 从 JSON 访问数据答案

【问题标题】：accessing data from JSON using jQuery使用 jQuery 从 JSON 访问数据
【发布时间】：2014-10-18 21:15:55
【问题描述】：

需要代码方面的帮助以提供此 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-form POST 测试，现在我生成了一个有限的数据集，用于加速客户端性能，以测试 API - 所有这些都可以很好地产生预期的结果如本文顶部所示（“结果”页面的回声）。但是，现在在 $.parseJSON 级别的 Javascript 函数中处理 JSON 对象时会发生错误。在测试输出 DIV 中，我附加的输出如下...

Chandler
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

【问题讨论】：

你遇到了什么问题？
节点 - 选择不添加到 id=zip
您需要发布更多代码，我们可以自己使用这些代码来重现问题，否则我们无法提供帮助。
您应该删除var results = $.parseJSON(myData);。当您指定 dataType 时，jQuery 已经解析了 json。
只是从 PHP 技能中磨练我的 jquery - 通过...传递数据对象...var results = myData; ...??

标签： javascript jquery json

【解决方案1】：

替换这个：

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

用这个：

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

onSelect 是当您使用鼠标选择某些文本时触发的事件！

您还应该在附加结果之前清理 zip 选择：

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

【讨论】：

给我们一些其他的见解:) 一些错误？结果不匹配？没有结果？
抱歉没有结果 - 将检查 myData 的输出
您的网站是否在请求的同一个域中？
是同一个域 - 并且能够删除“.each”块并在来自函数 (myData) 的 HTML DIV 调用中显示 AJAX 呈现的 JSON 数据 - 但是无法迭代。 - 将尝试 Dancer 的建议 - 但也想知道我们是否需要截断另一个函数 - 例如这个例子...stackoverflow.com/questions/733314/…
您还应该在生成列表的服务器上调用header('content-type: text/json');，或者按照@Dancer321 的建议在客户端将文本解析为json

【解决方案2】：

尝试将此添加到 ajax 参数中

$.ajax({
                  datatype: "json",
    });

并尝试在每个成功函数中调用它。

       var newMyData = $.parseJSON(myData);

然后使用新变量。

【讨论】：

非常好的建议 - 更接近但仍未获得预期结果。

【解决方案3】：

@lazel 和 @dancer 都解决了这个问题的答案，并且之前的帖子在这里找到...Ajax success function returning [object, object] ...JSON 响应已经按照一位评论员的建议进行了解析，但返回的数据已经处理作为对象中的对象。

已解决并使用此更新的代码。

希望这将有助于其他 JQuery 新手。感谢贡献者！

function slct_zip () 
    {

        var myCriteria = "";

        var key = "yourAPIkeyhere";

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

        var myDataRequest = $.ajax({
                    url: 'yourphpqueryscriptinJSON.php',
                    type: 'POST',
                    dataType: 'json',
                    data: {city:myCriteria, api_key:key},
                    success: function(myData)
                    {
                        alert( "Please Select Zip" );

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

                        for (var i=0;i<myData.length;i++) 
                            {
                            $( "#zip" ).append($('<option></option>').val(myData[i].zip).html(myData[i].zip));
                            }
                    }

            });

        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);
        }
        });

     }

【讨论】：