javascript - Ajax 获取表单数据和 url

Question

我正在学习 AJAX，方法是遵循一些在线教程并在遇到困难时从非常友善的 SO 社区获得帮助。我正在慢慢掌握它。

我的问题是基于我正在关注联系表的 2 个不同教程

教程 1 执行以下操作:

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

教程 2 执行以下操作:

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

我的问题

不幸的是，这两个教程都没有真正涵盖 ajax 调用中的 url 和 data 属性，这就是我的问题所在。

1. 在 tutorial1 物理上获取所有表单字段的地方，即 data:'userName='+$("#userName").val()+ tutorial2 简单地执行以下操作 data: formData

因此，我说您不必像教程 1 中那样获取所有表单字段，而是可以获取整个表单并将其分配给一个变量并将其作为数据发送，这样说对吗？

1. 教程 1 对 url 进行硬编码，其中 tutorial2 获取表单并将 action 属性分配给 url:$(form).attr('action'),<

因此我说您不必对 URL 进行硬编码而是从表单中获取它并将属性操作分配给 url 是否正确？

1. 就最佳实践而言，哪个示例/教程更好？

提前致谢

Answer 1

根据我的看法，Tutorial2 很好，因为他在那里写了那个特别的 ajax一般操作方面的方法，即您可以使用一个 ajax 函数来提交任意数量的表单。假设我有下面的 ajax 包裹在 function() 中

function submitForm(form){ //accepts form as parameter
    var formData = $(form).serialize(); //serialize this particular form
    $.ajax({
              type: 'POST',
              url: $(form).attr('action'), //get value from forms action attrbute
              data: formData
    }).done(function(response) {

    });
}

现在假设我有 2 form如下

<form id="frm1" action="Page1.html" onsubmit="submitForm(this)">
        .....    
</form>

<form id="frm2" action="Page2.html" onsubmit="submitForm(this)">
        .....    
</form>

现在从这两个表单中，您都将表单本身作为 parameter 传递到 function哪个function使用 js 进行操作写在上面

现在 Tutorial1 可能只是为了让初学者了解应该有哪些值或它如何工作。