如何使用AJAX发送Web表单

如果您是初学者，则可能已经阅读了jQuery指南。让我们直接进入。

为什么使用AJAX

您可能想知道“为什么需要AJAX？" HTML完全能够提交表单，并且以一种非常轻松的方式进行提交。 AJAX已在大多数网页中实现，并且其受欢迎程度持续上升。

AJAX带来的巨大好处是能够部分加载部分网页。这使页面显得更快，响应速度更快，并仅需重新加载一小部分数据而不是整个页面即可节省带宽。以下是一些基本的AJAX用例：

  • 定期检查是否有新电子邮件。
  • 每30秒更新一次实时足球比赛得分。
  • 更新在线价格拍卖。

    • AJAX为您（开发人员）提供了几乎无限的能力来使网页变得快速，响应迅速且活泼。这是您的访问者会感谢您的东西。

    HTML < /

    开始之前，您需要HTML表单。如果您不知道HTML是什么，请阅读有关如何为初学者制作网站的指南。

    以下是您需要的HTML：

    <!DOCTYPE html><html><head>	<script class="lazy" data-original="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>	<script type="text/javascript">	</script></head><body>	<form action="some/file" method="POST" name="myForm" id="myForm">		Name:		<input type="text" name="name">		Age:		<input type="text" name="age">		<input type="submit">	</form> </body></html>

    此html定义了一个表单，其中包含一些要素。请注意，其中有 action 和 method 属性。这些定义了在何处以及如何提交表单。当您使用AJAX时不需要它们，但是使用它们是一个好主意，因为它可以确保您的网站的访问者在禁用JavaScript的情况下仍然可以使用它。该页面包括Google在其CDN上托管的jQuery。 头包含一个 script 标记-这是您编写代码的位置。

    此表单现在可能看起来有些无聊，因此您可能想考虑学习CSS来增强它的功能。

    JavaScript

    有几种方法可以使用JavaScript提交表单。第一种也是最简单的方法是通过 submit 方法：

    document.getElementById('myForm').submit();

    如果愿意，您当然可以使用jQuery定位表单-没什么区别：

    $('#myForm').submit();

    此命令告诉您的浏览器提交表单，就像按提交按钮一样。它通过其ID定位表单，在本例中为 myForm 。这不是AJAX，因此会重新加载整个页面-并非总是如此。

    在表单的 method 属性中，您指定了提交表单的方式。这可以是 POST 或 GET 。使用AJAX提交表单时不使用此属性，但是可以使用相同的方法。

    许多现代Web都是基于GET或POST请求运行的。一般来说，GET用于检索数据，而POST用于发送数据（并返回响应）。可以使用GET发送数据，但是POST几乎总是更好的选择-特别是对于表单数据。您之前可能已经看过GET请求-它们发送附加到URL的数据：

    somewebsite.com/index.html?name=Joe

    问号告诉浏览器，紧随其后的任何数据都不应用于遍历网站，而应改为传递到页面进行处理。这对于诸如页码之类的简单事情效果很好，但是它有一些缺点：

    最大字符数限制：：URL中可以发送的最大字符数。如果您尝试发送大量数据，可能没有足够的空间。
    可见性：任何人都可以在GET请求中看到正在发送的数据-这对于诸如密码之类的敏感数据不利。

    POST请求的工作方式类似，只是它们不发送URL中的数据。这意味着可以发送大量数据（数据称为有效载荷），并且通过不公开数据来获得一定的安全性。尽管仍然可以轻松访问数据，所以如果您想完全放心，请查看SSL证书。

    无论使用POST还是GET，数据都是通过 key 发送的- >值对。在上面的URL中，键是名称，值是 Joe 。

    提交表单的更好方法是使用异步JavaScript和XML （AJAX）。 JavaScript支持AJAX调用，但使用起来可能会令人困惑。 JQuery实现了这些完全相同的方法，但是以一种易于使用的方式实现。您可以指示浏览器执行GET或POST请求-在此示例中坚持POST，但以类似的方式执行GET请求。

    语法如下：

    $.post('some/url', $('#myForm').serialize());

    此代码可以完成几件事。第一部分（ $ ）使您的浏览器知道您要使用jQuery完成此任务。第二部分从jQuery调用 post 方法。您必须传入两个参数；第一个是将数据发送到的URL，第二个是数据。您可能会发现（取决于您尝试访问的URL）您的浏览器的同源安全策略可能会在此处造成干扰。您可以启用跨域资源共享来解决此问题，但通常只需指向与页面位于同一域中的URL就足够了。

    第二个参数调用jQuery serialize 方法。此方法访问表单中的所有数据，并准备将其传输-对其进行序列化。

    仅此代码就足以提交表单，但是您可能会发现有些奇怪。值得研究您的浏览器开发人员工具，因为这些工具使调试网络请求变得轻而易举。

    或者，Postman是用于测试HTTP请求的优秀免费工具。

    如果您要按下“提交"按钮时，可以使用AJAX提交表单，这很容易。您需要将代码附加到表单的 submit 事件。以下是代码：

    $(document).on('submit','#myForm',function(){ $.post('some/url', $('#myForm').serialize()); return false;});

    此代码可完成多项操作。提交表单后，浏览器将首先运行并运行您的代码。然后，您的代码使用AJAX提交表单数据。所需的最后一步是阻止原始表单提交-您已经使用AJAX完成了此操作，因此您不希望再次发生！

    如果您想在AJAX完成后执行其他任务已经完成（甚至可能返回状态消息），则需要使用回调。 jQuery使这些变得非常易于使用—只需将一个函数作为另一个参数传递即可，如下所示：

    $.post('url', $('#myForm').serialize(), function(result) { console.log(result);}

    结果参数包含数据发送到的url返回的任何数据。您可以轻松地对以下数据进行回复：

    if(result == 'success') { // do some task}else { // do some other task}

    该信息就这样了。希望您现在对HTTP请求有深入的了解，以及AJAX如何在表单上下文中工作。

    您今天学到了什么新技巧吗？如何将AJAX与表单一起使用？在下面的评论中让我们知道您的想法！

    图片来源：vectorfusionart / Shutterstock

    标签: JavaScript jQuery Web开发