jQuery解析JSON响应

Question

我已成功发布到PHP文件，并获得了良好的答复。 我似乎无法理解的部分是将其解析然后显示在页面上。 这是我在验证处理程序中的javascript：

submitHandler: function(form) {
    var formData = $(form).serialize();
    $.post('http://test.php', formData, function(data) {
        if(data.success) {
            $('#load').show();
            var response = i;
            $('#load').hide();
            //var msg = '';
            for(var i = 0; i < x.flights.length; i++) {
               msg += '<span>';
               msg += '<p>Flight Number: ' + x.flights[i].flight_number + '</p>';
               msg += '<p>Cost: ' + x.flights[i].cost + '</p>';
               msg += '</span>';
            }
            //this is were I think it should display. but It's not working

            $('#load').html(msg);

这是我的json响应：

   success
true

 message
"Success"

flights
[Object { flight_number="334", cost="983.40", departure_city="Kearney Regional Airpor...arney, Nebraska - (EAR)", more...}]

0
Object { flight_number="334", cost="983.40", departure_city="Kearney Regional Airpor...arney, Nebraska - (EAR)", more...}

flight_number
"334"

cost
"983.40"

departure_city
"Kearney Regional Airport, Kearney, Nebraska - (EAR)"

arrival_city
"Chadron Muni Airport, Chadron, Nebraska - (CDR)"

departs
"2014-03-19 04:33:00"

arrives
"2014-03-19 08:12:00"

duration
"219"

adult_seats_available
"2"

senior_seats_available
"1"

我知道您没有看到JSON响应，但可以在FF firebug中看到它。 我是jQuery / JSON的新手，我只想将响应打印到我的页面上。 提前致谢。

Answer 1

查看JSON.stringify(data) 文档，我不知道您想在哪里显示JSON，但是如果您只想查看它的内容，请打开调试器和console.log(JSON.stringify(data)); 应该这样做。

Answer 2

您正在使用post方法，它可能默认返回xml，json，脚本，文本，html。 因此，您正在从post方法获取数据。

尝试查看https://api.jquery.com/jQuery.post/

如果要访问它，则可以使用JSON.stringify（data）将json显示为字符串。 要从json访问数据，您可以使用点（。）表示法。

Answer 3

这里有几件事情要看。

首先，您将html（即msg ）添加到#load元素（ $('#load').html(msg); ）中，但在代码的前面，您将其隐藏（ $('#load').hide(); ）。 因此，我认为这将回答您的主要问题； 即删除行$('#load').hide(); 或添加$('#load').show(); 在$('#load').html(msg); 。

还是没看到什么？ 然后，响应可能不如您所声称的那么正确，因此，检查分配给msg内容的一种更简单的方法可能是提醒html alert(msg); <-构建html后进行此调用。

因此，除了使用#load元素外，您似乎正在使用它来保存加载的gif，还通过msg的内容为其分配了响应。 也许您需要分开使用元素，以便#load元素用于加载gif，并为响应添加另一个元素。 所以你的代码更像这样。

html

<div id="load" class="hide"><img src="loading-animation.gif">...</div>
<div id="post-response" class="hide alert"><div>

隐藏类不显示 ， 警报类表示响应警报的样式。

js

submitHandler: function(form) {

    // show the loading gif before we make the 
    // post data and wait for an async response
    $('#load').show();

    ...
    $.post('http://test.php', formData, function(data) {
        if(data.success) {

            // post-back has completed so lets hide the animation
            $('#load').hide();

            // your code to build html msg

            // assign and show the response element
            $('post-response').html(msg);
            $('post-response').show();
            ...