javascript - 如何使用 ajax 发布表单并返回数组中的数据？

Question

嗨，如何发布表单并返回数据，它将是这样的数组

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

我的代码是这样的

$('#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

因为“数据”是一个服务器响应，我猜你的服务器返回一个 json 对象。在这种情况下，您必须以某种方式通知 jquery 的 ajax 您期望来自服务器的 json 响应，或者您必须自己将“数据”转换为 json 对象。

最好遵循第一个选项，这样您就不必自己处理翻译，您可以通过为您的 ajax 请求提供一个额外参数来轻松做到这一点:dataType: 'json', 这样就可以了!

现在您已经从请求中获得了正确的响应对象，您可以使用 var string_resp=JSON.stringify(data); 对其进行字符串化，然后提醒它 alert(string_resp) 或者你可以像这样访问它的元素:alert(data.status) 这将提醒你的对象的状态字段等。

所以你的代码将是:

 $.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
    }
 });