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属性，这就是我的问题所在。

其中tutorial1实际获取所有表单字段，即data:'userName='+$("#userName").val()+ tutorial2只执行以下data: formData

因此，我说你没有像在tutorial1中那样得到所有表单字段，而是你可以只获取整个表单并将其分配给变量并将其作为数据发送吗？

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

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

哪个示例/教程在最佳实践方面更好？

提前致谢

Answer 1

根据我的观点 Tutorial2 是好的，因为他已经根据一般操作编写了特定的ajax方法，即您可以使用一个单独的ajax函数来提交任意数量的表单。假设我在function()

包含的ajax下面

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 s，如下所示

<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 可能只是为初学者了解应该存在哪些值或它是如何工作的。

Answer 2

$(form).serialize();基本上会在第一个示例中为您自动输入内容。请参阅https://api.jquery.com/serialize/
是的，您可以根据需要设置网址，教程2使用当前的表单操作。您可以通过变量或硬编码来设置它，具体取决于您的目标。在这种情况下，由于本教程向您展示了如何通过ajax提交普通表单，因此他们将始终使用他们提交行为的表单
第二个教程看起来更清晰，但是针对特定情况，您希望通过ajax发送表单而不是自定义帖子

Answer 3

要回答您的第一个问题，jQuery's .serialize()将采用给定的表单或个人输入/选择/等。并生成一串URL编码参数，以便通过POST或GET发送。在处理表单时，这是非常方便的事情。通过手动构造该字符串，教程1实际上与教程2做同样的事情。

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

对于你的第二个问题，你在这里做的事情并没有太大的区别，但你可能最好不要在你的标记而不是你的代码中放置URL，因为你＆＃ 39; d通常在使用典型的Web框架时生成URL，并且将HTML视为模板并将JS / CSS视为静态资产（您不希望使用URL模板化JavaScript）是一种很好的做法。 / p>

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

Ajax获取表单数据和URL

3 个答案: