使用JQuery通过ajax动态发送json格式的表单后数据


Send post form data in json format via ajax with JQuery dynamically

我想知道如何使用JQuery动态地通过ajax发送json格式的表单后数据?例如,我在JQ:中编写了这样的代码

$.post("test.php", { func: "getNameAndTime" },
    function(data){
      alert(data.name); // John
      console.log(data.time); //  2pm
    }, "json");

这很好,但在实时应用程序中,通常需要发送巨大的表单数据,用户可以动态更改字段,所以我不知道会发送多少func1、func2、func3甚至func[]。问题是如何动态地做到这一点,在AJAX的旧世界中,我可以通过对表单进行序列化并发送到服务器来完成。提前Thanx。

是的,我可以将所有数据发送到服务器,在任何情况下都会很好地工作,示例:

$(function() { // on document load
$('#email_form').submit(function() { // set onsubmit event to the form
  var data = $('#email_form').serialize(); // serialize all the data in the form 
  $.ajax({
    url: 'testJson.php', // php script to retern json encoded string
    data: data,  // serialized data to send on server
    dataType:'json', // set recieving type - JSON in case of a question
    type:'POST', // set sending HTTP Request type
    async:false, 
    success: function(data) { // callback method for further manipulations             
      for (key in data.email) {
        alert(data.email[key]);
      }
    },
    error: function(data) { // if error occured
    }
  });
  return false;
});

});

可以为AJAX请求建立动态数据,但显然您需要知道检索动态数据的逻辑。你的问题中没有描述这一点,所以在下面的例子中,我假设它是基于表单中.user_input字段的数量(可以是2、10或其他)。然后,数据由字段名称+字段值组成。

重点是显示数据的动态收集,仅此而已。

var ajax_data = {};
$('.user_input').each(function() {
    ajax_data[$(this).attr('name')] = $(this).val();
});
$.post('some/url.php', ajax_ata); //etc