php / ajax JSON respone在解析

时间:2015-04-27 17:07:56

标签: javascript php jquery ajax json

当我尝试将来自AJAX请求的响应解析为JSON时,我得到[object,Object]值而不是在解析响应之前返回的实际值。我怎么可能做错了?

我有一个名为“apply.php”的脚本,它有一个简短的应用程序和一个用户选择城镇时调用的AJAX请求。还有另一个名为“suburb.php”的脚本,它检索数据库中所选城镇下的存储郊区。当用户选择/更改城镇时,将调用第二个脚本。

在“apply.php”脚本中,我有一个显示响应的JavaScript警报,然后我将其解析为JSON。传递响应后,返回[object,Object]而不是实际值,从而禁止我读取JSON键值。

使用值而不解析它们也无济于事。我试着检查与我的问题有关的问题而没有任何运气。

非常感谢您的协助。

apply.php

<?php
$dbcon = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Accomodation Application</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<style>
form div {
    margin-bottom: 20px;
}
</style>
<body>
<div>
    <div>
    <form>
        <p><a href="http://localhost/testwork/">Refresh</a></p>
        <div><label for="applicant-name">First Name</label><br /><input type="text" name="name" id="applicant-name"></div>
        <div><label for="applicant-surname">Surname</label><br /><input type="text" name="surname" id="applicant-surname"></div>
        <div><label for="applicant-identity">Smart ID Number</label><br /><input type="text" name="surname" id="applicant-identity"></div>
        <div id="town">
            <label for="applicant-town">Town</label><br />
            <select name="town" id="applicant-town"><option value="0">-- Select Town --</option>
            <?php
            $towns = mysqli_query($dbcon, "SELECT town_id, town_name FROM towns");
            while($town = mysqli_fetch_array($towns)){
                $town_id = $town['town_id'];
                $town_name = $town['town_name'];
                echo("<option value=\"$town_id\">$town_name</option>");
            }?>
            </select>
        </div>
        <div id="suburb">
            <label for="applicant-suburb">Suburb</label><br />
            <select name="suburb" id="applicant-suburb">
                <option value="0">-- Select Suburb --</option>
            </select>
        </div>
        <button type="submit">Submit</button>
    </form>
    </div>
</div>
<script>
$(document).ready(function(){
    $('#applicant-town').change(function(){
        var suburb_town = $(this).val();
        $.ajax({
            type: "GET",
            url: "suburbs.php",
            data: {town: suburb_town}
        })
        .done(function(data){
            alert(data);
            var burbs = JSON.parse(data);
            alert(burbs); // e.g. [{"1":"Halfway House"},{"2":"Noordwyk"},{"3":"Vorna Valley"}]
            $(burbs).each(burbs, function(key, value){
                $('#applicant-suburb').append('<option value="'+key+'">'+value+'</option>');
            });
        })
        .fail(function(){
            alert('There is an error somewhere.');
        });
    });
});
</script>
</body>
</html>

suburbs.php

<?php
$dbcon = new mysqli (DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
if(isset($_GET['town'])){
    $town_suburbs = array();
    $town_id = htmlspecialchars($_GET['town']);
    $suburbs = mysqli_query($dbcon, "SELECT suburb_id, suburb_name FROM suburbs WHERE suburb_town = $town_id");
    while($suburb = mysqli_fetch_array($suburbs)){
        $suburb_id = $suburb['suburb_id'];
        $suburb_name = $suburb['suburb_name'];
        $town_suburbs[] = array($suburb_id => $suburb_name);
    }
    echo json_encode($town_suburbs);
}
?>

6 个答案:

答案 0 :(得分:1)

为什么不在语句ajax中使用dataType:“json”?

$.ajax({
        type: "GET",
        url: "suburbs.php",
        data: {town: suburb_town}, 
        dataType: 'json'
})

因此,您必须制作“console.log”而不是制作“alert()”,并通过Javascript控制台分析您的浏览器。

“警报”功能仅显示“字符串”,因此在尝试时会显示内容。字符串中对象的表示是[object]。因此,而不是console.log占用alert()。

更新:您可以使用alert(JSON.stringify(data))在警报中显示字符串。

update2:您的代码将会显示

$.ajax({
        type: "GET",
        url: "suburbs.php",
        data: {town: suburb_town},
        dataType: 'json'
    })
    .done(function(data){
        console.log(data)
        });
    })

答案 1 :(得分:0)

也许,它已经保存为[对象]? 确保,

  1. 要解码JSON字符串,请使用JSON.parse()

  2. 要编码JSON字符串,请使用JSON.stringify

  3. 希望这有帮助。

答案 2 :(得分:0)

首先,您可以从评论中看到问题所在。但是,您可能希望将“id”用于某些事情,因此您可以执行以下操作。

$town_suburbs[] = array($suburb_id => $suburb_name);

您可以将其更改为

array_push($town_suburbs, array("id" => $suburb_id, "name" => $suburb_name));

然后在你的javascript端......

$(burbs).each(burbs, function(key, value){
    $('#applicant-suburb').append('<option value="'+key+'">'+value+'</option>');
});

可能会改为:

$(burbs).each(function(){
    $('#applicant-suburb').append('<option value="'+ this.id +'">'+ this.name +'</option>');
});

答案 3 :(得分:0)

如果你的&#34; E.G。&#34;是正确的,那么你不是以正确的方式循环(在javascript中)。

此:

$(burbs).each(burbs, function(key, value){
     $('#applicant-suburb').append('<option value="'+key+'">'+value+'</option>');
});

不应该工作,因为你必须循环一个对象数组,因此首先必须循环数组,然后,对象:

for (var i = 0; i < burbs.length; ++i) {
    $.each(burbs[i], function(key, val) {
        $('#applicant-suburb').append('<option value="'+key+'">'+val+'</option>');
    });
}

根据你的例子,你可以检查这个小提琴:http://jsfiddle.net/5yaj7La0/2/

只要您当前的输出具有以下结构:

[{"1":"Halfway House"},{"2":"Noordwyk"},{"3":"Vorna Valley"}];

您不需要更改您的PHP代码,但如果输出不同(不应该),您可能也需要更改PHP代码。

HTML输出:

enter image description here

(输出与小提琴有关,随意编辑名称和标签等等,这里重要的是Javascript)。

答案 4 :(得分:0)

如果您通过以下方式获得[Object object]

var burbs = JSON.parse(data);//alerting this will definitely present [Object object]

然后一切似乎都很好。

您正在解析数据,这将转换为json对象。

如果要查看响应数据,请使用:

var burbs = JSON.stringify(data);//converts the object to a string
alert(burbs);

也可能想要通过访问对象数组中每个对象的键来获取值:

//lets imagine this is our response data, which can also be the response data you parsed with JSON.parse(data);

var data = [{"1":"Halfway House"},{"2":"Noordwyk"},{"3":"Vorna Valley"}];

function iterate(data)
{
    for(var i=0;i<data.length;i++)
    {
        for(var i=0;i<data.length;i++)
        {
            for(var key in data[i])
            {
                var value = data[i][key];
                $('#applicant-suburb').append('<option value="'+key+'">'+value+'</option>');
            }
        }
    }
}

答案 5 :(得分:-1)

你的suburb.php文件中缺少header()语句会导致问题吗?

这样的东西