Javascript Ajax获取表单数据和url

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

我的问题是基于两个不同的教程，我下面的联系方式

教程1执行以下操作：

教程2执行以下操作：

我的问题

不幸的是，这两个教程都没有真正涵盖ajax调用中的

url

和

data

属性，这就是我的问题所在

其中tutorial1实际获取所有表单字段，即

数据：'userName='+$（“#userName”）.val（）+

tutorial2只需执行以下

数据：formData

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

教程1对

url

进行硬编码，其中教程2获取表单并将操作属性分配给

url:$（表单）.attr（'action'）

因此，我说您不必硬编码URL，而是从表单中获取URL并将属性操作分配给URL，这对吗

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

提前谢谢

$（表单）.serialize（）基本上自动完成第一个示例中键入的内容。
看

是的，您可以根据需要设置url，教程2使用当前表单操作。根据您的目标，您可以通过变量或硬编码进行设置。在本例中，由于教程向您展示了如何通过ajax提交普通表单，因此他们将始终使用提交表单的操作

第二个教程看起来更简洁，但针对的是希望通过ajax发送表单而不是定制帖子的特定情况

---

根据我的观点，Tutorial2很好，因为他在那里编写了一个特定的

ajax

方法，用于一般操作，即您可以使用一个ajax函数提交任意数量的表单。假设我将下面的ajax包装在一个

函数（）

现在假设我有2个

表单，如下所示

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

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


.....    
.....    

现在，从这两个表单中，您将表单本身作为
参数传递给
函数
，该函数由
函数
使用上面写的
js
进行操作

现在，教程1可能只是让初学者了解应该有什么值，或者它是如何工作的。
要回答您的第一个问题，将采用给定的形式或单个输入/选择/等，并生成一个URL编码的参数字符串，通过
POST
或
GET
发送。使用表单时，这是一件非常方便的事情。教程1通过手动构造此字符串，有效地完成了与教程2相同的工作

在这里，教程2似乎比教程1更可取，因为教程1的重复性更高，因此不易维护，更容易出错。但是，有时可能需要两者的混合，因为有时您可能希望在请求中发送表单中没有的其他数据

对于第二个问题，您在这里所做的工作并没有太大区别，但是您最好将URL放在标记中，而不是放在代码中，因为您通常在使用典型的Web框架时生成URL，并且最好将HTML作为模板，将JS/CSS作为静态资产（你不想用URL来模板你的JavaScript）

但是，如果使用Angular或Ember之类的前端框架，这种情况可能会有所不同

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

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) {

    });
}

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

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