如何用ajax发布表单并在数组中返回数据？

Question

HI how to post a form and return data it will be a array as like this

{
"notes":'some notes',
"validUntil": '12/12/2015',
"status": 1,
"menuItemName": "HR Section",
"menuItemDesc": "gggg"
}

My code is this

 $('#add-menu-list .btn[data-attr=submit-btn]').on('click', function(){ var formValidate = $('#add-menu-list').parsley().validate(); validateFront(); // console.log(formValidate); var menuName = $('input[data-api-attr=menuItemName]').val(); var validUntil = $('input[data-api-attr=validUntil]').val(); var menuStatus = $('input[data-api-attr=status]').val(); var menuNote = $('textarea[data-api-attr=notes]').val(); var menuDesc = $('textarea[data-api-attr=menuItemDesc]').val(); var dataString = { menuItemName: menuName, validUntil : validUntil, status : menuStatus, notes : menuNote, menuItemDesc : menuDesc }; if(formValidate == true){ alert('success'); console.log(menuName + validUntil + menuStatus + menuNote + menuDesc); var url = "xyz.html"; // the script where you handle the form input. $.ajax({ type: "POST", // url: url, dataType: "json", data: $(dataString).serialize(), // serializes the form's elements. success: function(data) { alert(data); // show response } }); }else{ alert('Validation fail '); } }); 

Answer 1

Since "data" is a server response i guess that your server return a json object. In this case you have to somehow inform the jquery's ajax that you expect a json response from server or you have to translate the "data" to a json object by your self.

It is best to follow the first option so you don t have to deal with the translation your self you can easily do that by giving an extra parameter tou your ajax reuest : dataType: 'json', this will do the trick!

Now that you have a proper response object from your request you can either stringify it with var string_resp=JSON.stringify(data); and then alert it alert(string_resp) or you can access its elements like that : alert(data.status) which will alert your object's status field etc.

so your code will be :

 $.ajax({
    type: "POST",
    url: url,
    dataType: 'json',
    data: $(menuName).serialize(), // serializes the form's elements.
    success: function(data)
    {
         alert(data); // will alert an object
         alert(data.status); // will alert object's status field in this case 1
         alert(JSON.stringify(data)) // will alert the object as a string
    }
 });

Answer 2

you are sending only one value in serialize, serialize() should be on form element not on field element, like :

  $('#add-menu-list .btn[data-attr=submit-btn]').on('click', function(){  
       ...
        $.ajax({ 
          ...         
          data:$("#form").serialize();
          ...
          success: function(data)
                       {
                           alert(data.notes); // show response 
                           ....
                       } 

Answer 3

  var myObj = { "notes":'some notes', "validUntil": '12/12/2015', "status": 1, "menuItemName": "HR Section", "menuItemDesc": "gggg" }; myObj.toString = function() { var str = ''; for (var property in myObj) { if (myObj.hasOwnProperty(property) && (property != "toString") ) { str += (property + ': ' + myObj[property] + "\\n"); // do stuff } } return str; } alert(myObj);