Ajax获取表单数据和URL

Question

I am learning AJAX by following some online tutorials and getting help from the very kind SO community when stuck. I am slowly getting the hang of it.

My question is based on 2 different tutorials I am following for a contact form

Tutorial 1 does the follwoing:

jQuery.ajax({
        url: "contact_mail.php",
        data:'userName='+$("#userName").val()+'&userEmail='+$("#userEmail").val()+'&subject='+$("#subject").val()+'&content='+$(content).val(),
        type: "POST",
        success:function(data){
        $("#mail-status").html(data);
        },
        error:function (){}
        });

Tutorial 2 does the follwoing:

var formData = $(form).serialize();
$.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })
        .done(function(response) {

My question

Unfortunately both tutorials does not really cover the url and data attributes in the ajax call and this is where my question comes in.

1. Where tutorial1 physically gets all the form fields i.e data:'userName='+$("#userName").val()+ tutorial2 simply does the following data: formData

Thus am I correct in saying that you do not physically have to get all the form fields like in tutorial1 but rather you can just get the whole form and assign it to a variable and send that as data?

1. Tutorial 1 hardcodes the url where tutorial2 gets the form and assign the action attribute to the url: $(form).attr('action'),

Thus am I correct in saying that you do not have to hardcode the URL but rather get it from the form and assign the attribute action to the url?

1. Which example/ tutorial is the better one in terms of best practice?

Thanks in advance

Answer 1

To answer your first question, jQuery's .serialize() will take a given form or individual inputs/selects/etc. and produce a string of URL-encoded parameters to be sent via POST or GET. This is a very handy thing to do when working with forms. Tutorial 1 is effectively doing the same thing as tutorial 2 by manually constructing this string.

Tutorial 2 seems preferable over Tutorial 1 here, as Tutorial 1 is far more repetitive and, as such, less maintainable and more error prone. However, a mixture of the two may sometimes be needed, as you may sometimes want to send additional data in the request that isn't in the form.

For your second question, it doesn't really make too much of a difference what you do here, but you'd probably be better off placing the URL in your markup rather than your code, since you'd typically generate URLs when using a typical Web Framework, and it's good practice to treat HTML as templates and JS/CSS as static assets (you wouldn't want to template your JavaScript with URLs).

However, this situation might be different if you were using a front-end framework like Angular or Ember.