javascript-Ajax获取表单数据和URL

我通过遵循一些在线教程来学习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在物理上获取所有表单字段的地方,即数据：’userName =’$(“#userName”).val()tutorial2仅执行以下数据：formData

因此,我是否正确地说一句,您实际上不必像tutorial1中那样获取所有表单字段,而是可以获取整个表单并将其分配给变量并将其作为数据发送？

>教程1对URL进行硬编码,其中tutorial2获取表单,并将action属性分配给该URL：$(form).attr(‘action’),

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

>就最佳实践而言,哪个示例/教程是更好的示例/教程？

提前致谢

解决方法:

为了回答您的第一个问题,jQuery’s .serialize()将采用给定的形式或单独的输入/选择/等.并生成一串URL编码参数,以通过POST或GET发送.使用表单时,这是一件非常方便的事情.教程1通过手动构造此字符串来有效地执行与教程2相同的操作.

在这里,教程2似乎比教程1更可取,因为教程1更具重复性,因此,维护性较差,更容易出错.但是,有时可能需要将两者混合使用,因为您有时可能希望在请求中发送格式以外的其他数据.

对于第二个问题,这样做实际上并没有太大的区别,但是最好将URL放在标记中而不是代码中,因为通常在使用典型的Web框架,并且优良作法是将HTML当作模板,将JS / CSS当作静态资产(您不希望使用URL来模板化JavaScript).

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

javascript-Ajax获取表单数据和URL

相关推荐