通过json / ajax / jquery提交表单

Question

Here is my code

    function generate_clicked()
    {
        var txt_text_color = $('#txt_text_color').val();
        var url='process.php?';
        url+='txt_text_color='+encodeURIComponent(txt_text_color);


        $.ajax({
            url: url,
            beforeSend: function ( xhr ) {
            xhr.overrideMimeType("application/json; charset=x-user-defined");
          }
        }).done(function ( data ) {
            try{
                $('#preview').val(data.css);
                $('#my_iframe').srcdoc = data1;
                }
            catch(err)
            {
                console.log(err);
            }
            document.getElementById("my_iframe").src = data.live_preview_html_page;
        });

    }

This works for my purposes but if I added another form element I would tediousily have to add var example =$('....').val(); and url+='example'+endcodeU.....

Which I will be having over 100 elements, then I would retreview them on process with

$txt_text_color = $_REQUEST['txt_text_color'];

My question is, how can I serialize this (I think that's what I need to do) so that I don't have to write those two varibles names each time I make a new form object.

I need to save get/post those varibles in process.php to use them.

Sorry if this doesn't make sense, I'm still learning.

Answer 1

Try form.serialize() http://api.jquery.com/serialize/

Your code would look something like this:

function generate_clicked()
{
    var formData = $('#form').serialize();
    var url='process.php?';
    url+=formData;


    $.ajax({
        url: url,
        beforeSend: function ( xhr ) {
        xhr.overrideMimeType("application/json; charset=x-user-defined");
      }
    }).done(function ( data ) {
        try{
            $('#preview').val(data.css);
            $('#my_iframe').srcdoc = data1;
            }
        catch(err)
        {
            console.log(err);
        }
        document.getElementById("my_iframe").src = data.live_preview_html_page;
    });

}