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萤火虫。我是新来的jQuery/JSON，我只是想打印回应到我的网页。提前致谢。

Answer 1

调查JSON.stringify(data)doc我不知道你想在哪里显示你的JSON，但如果你只是想看看它是什么开放调试器和console.log(JSON.stringify(data));应该这样做。

Answer 2

您正在使用post方法，它可能会默认返回xml，json，script，text，html。所以你从post方法中获取数据。

试着看一下https://api.jquery.com/jQuery.post/

如果你要访问它，那么你可以使用JSON.stringify（数据）显示JSON作为一个字符串。并且要从json访问数据，您可以使用点（。）表示法。

Answer 3

这里有几件事要看。

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

还没看到什么？那么或许你的回应并不像你所声称的那么可能，那么检查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(); 
      ...