如何显示jQuery .ajax post返回的JSON

时间:2022-09-15 15:44:36

Starting to work on a project that is built completely on JSON data. It is returned like this:

开始开发完全基于JSON数据的项目。它是这样返回的:

{"location":{"id":10,"contactPhone":"8675309","contactName":"bob","name":"bill smith","zipCode":"90210","state":"California","address1":"104 S. Olive","city":"Temecula","country":"USA"},"success":true}

I am comfortable processing data returned in HTML form (usually tables) by traversing the DOM with the .find and other filtering to find success flags. I have no idea how to do this with JSON - I need to filter to the last object "success" and check if it is true or false. With HTML returned data I do it like this:

通过使用.find和其他筛选方法遍历DOM以查找成功标志,我可以轻松地处理HTML表单(通常是表)返回的数据。我不知道如何使用JSON实现这一点——我需要过滤到最后一个对象“success”,并检查它是真还是假。使用HTML返回的数据,我这样做:

submitHandler: function(form) {
    $.ajax({
     //other ajax stuff
      success: function(data) {
        var answer = $(data).find("td:eq(1)").text();
        var message = $(data).find("td:eq(3)").text();
        //console.log(data);
        if (answer == "True") {
          $('#messages').show().html(message);
      } else {
          $('#messages').show().html('Error logging in: ' + message);
      }
    }
  });
  return false;
  }
  1. Even after using this method I don't completely understand what the function(data) means, Ive used data, msg and response without really understanding what the difference between them are.
  2. 即使使用了这种方法,我也不能完全理解函数(数据)的含义,我使用了数据、msg和response,却没有真正理解它们之间的区别。

I am able to post to the webservice and get the returned JSON with this .ajax call

我可以通过这个.ajax调用发布到webservice并获得返回的JSON

$.fn.serializeObject = function() {....}
submitHandler: function(form){
    var wrapper = {};
    var location = {};
    wrapper.location = $("#newLocation").serializeObject();
        $.ajax({
            type: $(form).attr('method'),
            url: '/web/service/' + 'locationService' + '/' + 'createLocation',
            dataType: 'json',
            async: false,
            data: JSON.stringify(wrapper),
            success: function(msg) {
                    console.log('success' + msg );
                    //need to traverse to success and if true, do something
            },
                    error: function(msg) {
                    console.log('failure' + msg );
                    //need to traverse to success and if false, do something
            }
    });
    return false;
}
  1. How do you filter to the "success" part in a JSON string (string or object?)
  2. 如何过滤JSON字符串(字符串还是对象)中的“success”部分?
  3. What are the correct terms for the key/number pairs (is that even correct) in the JSON string IE "contactPhone":"8675309"
  4. JSON字符串IE“contactPhone”中键/数字对的正确术语是什么?
  5. How do you then display the data if "success":"true" - I will work on that myself but if anyone has good method I would appreciate some advice. I would imagine you just appendTo a table somehow?

    如果“成功”:“真的”,那么你如何显示数据呢?——我自己来做,但是如果有人有好的方法,我会很感激你的建议。我可以想象你只是附在一张桌子上?

    I have a lot of questions on JSON, and am trying to word the questions in a general manner so that the help I am given can help someone else, I apologize for the length of this post. I appreciate any help and if requested will shorten/edit this question.

    我有很多关于JSON的问题,我试着用一般的方式来回答这些问题,这样我得到的帮助可以帮助别人,我为这篇文章的长度道歉。我感谢任何帮助,如果需要,将缩短/编辑这个问题。

2 个解决方案

#1


4  

msg here is a json formatted object. You can get success value like that:

这里是一个json格式的对象。你可以得到这样的成功价值:

success: function(msg) {
                    console.log('success' + msg.success );
                    if(msg.success) { //could be wrote: msg.success === true
                        //do some stuff
                    }
            },

"contactPhone":"8675309"

“contactPhone”:“8675309”

contactPhone is the key, "8675309" is the value. But in your sample, to get "contactPhone" value, you need to first get the location object:

contactPhone是键,“8675309”是值。但是在您的示例中,要获取“contactPhone”值,您需要首先获得location对象:

var contactPhoneValue = msg.location.contactPhone;

#2


3  

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. http://www.json.org/

JSON (JavaScript对象表示法)是一种轻量级的数据交换格式。人类很容易读写。机器很容易解析和生成。http://www.json.org/

Now the code for reading and writing properties of json object is very similar as it is for normal javascript object.

现在,读取和写入json对象属性的代码与普通javascript对象非常相似。

$ajax({
  dataType:'json',
  success:function(data){
        console.log(data['success']);   //returns for whatever will be the value for succes
        //or
        console.log(data.success);   //returns for whatever will be the value for succes
        data.location['contactName'] = "new name";                    
 }
});

Accessing and manipulating javascript and Json object is same.
Here is a very good guide for them:
http://www.dyn-web.com/tutorials/obj_lit.php

访问和操作javascript和Json对象是相同的。这里有一个非常好的指南:http://www.dyn-web.com/tutorials/obj_lit.php



UPDATED:
A better version, maybe this could help:
http://jsfiddle.net/hvzcg/4/

更新:一个更好的版本,可能会有帮助:http://jsfiddle.net/hvzcg/4/

#1


4  

msg here is a json formatted object. You can get success value like that:

这里是一个json格式的对象。你可以得到这样的成功价值:

success: function(msg) {
                    console.log('success' + msg.success );
                    if(msg.success) { //could be wrote: msg.success === true
                        //do some stuff
                    }
            },

"contactPhone":"8675309"

“contactPhone”:“8675309”

contactPhone is the key, "8675309" is the value. But in your sample, to get "contactPhone" value, you need to first get the location object:

contactPhone是键,“8675309”是值。但是在您的示例中,要获取“contactPhone”值,您需要首先获得location对象:

var contactPhoneValue = msg.location.contactPhone;

#2


3  

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. http://www.json.org/

JSON (JavaScript对象表示法)是一种轻量级的数据交换格式。人类很容易读写。机器很容易解析和生成。http://www.json.org/

Now the code for reading and writing properties of json object is very similar as it is for normal javascript object.

现在,读取和写入json对象属性的代码与普通javascript对象非常相似。

$ajax({
  dataType:'json',
  success:function(data){
        console.log(data['success']);   //returns for whatever will be the value for succes
        //or
        console.log(data.success);   //returns for whatever will be the value for succes
        data.location['contactName'] = "new name";                    
 }
});

Accessing and manipulating javascript and Json object is same.
Here is a very good guide for them:
http://www.dyn-web.com/tutorials/obj_lit.php

访问和操作javascript和Json对象是相同的。这里有一个非常好的指南:http://www.dyn-web.com/tutorials/obj_lit.php



UPDATED:
A better version, maybe this could help:
http://jsfiddle.net/hvzcg/4/

更新:一个更好的版本,可能会有帮助:http://jsfiddle.net/hvzcg/4/