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

时间:2016-01-01 09:31:58

标签: javascript jquery html ajax

如何发布表单并返回数据,它将是一个数组,如下所示

{
"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 ');
                }

           });




3 个答案:

答案 0 :(得分:2)

因为"数据"是服务器响应我猜你的服务器返回一个json对象。在这种情况下,您必须以某种方式告知jquery的ajax您希望服务器发出json响应,或者您必须翻译"数据"你自己的一个json对象。

最好按照第一个选项,这样你就不必处理自己的翻译,你可以通过额外的参数来轻松地做到这一点,你可以通过你的ajax reuest:dataType: 'json',这样就可以了! / p>

既然您的请求中有正确​​的响应对象,您可以使用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
    }
 });

答案 1 :(得分:0)

你只在serialize中发送一个值,serialize()应该在表单元素上而不是在field元素上,如:

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

答案 2 :(得分:0)

	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);