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

Question

I wander how send post form data in json format via ajax with JQuery dynamically? For example I'm coding something like this in JQ:

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

and that's good, but in live apps often need to send huge form data and user can dynamically change the fields, so I don't know how many func1, func2, func3 or even func[] will be sent. The q is how to do this dynamically, in old world of an AJAX I could done it by serealizing the form and send to the server. Thanx in advance.

Solution 1

Yes I can send all the data to the server and in any case it will worked well, example:

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

});

Solution 2

It is possible to build up dynamic data for an AJAX request but clearly you'll need to know the logic for retrieving that dynamic data. You don't describe this in your question, so in the below example I'm assuming it's based on the number of .user_input fields in the form (which could be 2, or 10, or whatever). The data is then comprised of field name + field value.

The point is to show dynamic collection of data, that's all.

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

Comments

[Arthur Kushman]

and one more thing, what should I do if there is multiple fields like name="emial[]"? I think this method won't work for that purpose.

[Mitya]

As I said in my answer, the means of compiling your data is up to you and I can't predict that. I assumed a contrived example where you just wanted to gather up the values from user_input fields. I was simply showing that, yes, you can build dynamic AJAX data. Я не русский но может кажется так, из-за моего юзернейм. Я в России жил в течении 4 лет.

[Arthur Kushman]

Охереть, ты Англичанен-программист, который жил в россии 4 года - круто =) Yeah, Your user name told me about Russian probabilities.

[1615903]

This doesn't send the form data in json format at all. dataType: json only tells the ajax request that it expects the return data to be json.