使用jQuery访问JSON中的数据

accessing data from JSON using jQuery

本文关键字：数据 JSON jQuery 访问 使用      更新时间：2023-09-26

需要代码帮助来提供此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-formPOST测试，现在我生成了一个有限的数据集，该数据集加速了为测试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是当您用鼠标选择某些文本时触发的事件！

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

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

尝试将其添加到ajax参数中

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

并尝试在每个之前在成功函数中调用此函数。

       var newMyData = $.parseJSON(myData);

然后使用新的变量。

这个问题的答案由@lazel和@dancer以及之前在这里找到的帖子解决了。。。Ajax成功函数返回[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);
        }
        });
     }
相关文章：