如何使用ajax发送web表单
您可能已经阅读了jQuery指南，以及jQuery教程中关于AJAX的第五部分，但今天我将向您展示如何使用AJAX动态发送web表单。JQuery是迄今为止使用AJAX最简单的方法，如果您是初学者，请查看我们的入门教程。我们直接跳进去吧。
为什么要使用ajax
你可能想知道“为什么我需要AJAX？”HTML完全能够提交表单，而且提交表单的方式相当轻松。AJAX在绝大多数网页中都得到了实现，而且它的流行程度还在不断上升。
AJAX带来的巨大好处是能够部分加载网页的部分。这使得页面显示更快、更灵敏，只需重新加载一小部分数据而不是整个页面，就可以节省带宽。以下是一些基本的AJAX用例：
- 定期检查新邮件。
- 每30秒更新一次实况足球比分。
- 更新在线拍卖的价格。
AJAX为开发人员提供了一种几乎无限的能力，可以使网页快速、响应迅速、快速——这是您的访问者会感谢您的。
html
在开始之前，您需要一个HTML表单。如果你不知道HTML是什么，那么阅读我们的指南，如何为初学者创建一个网站。
以下是您需要的HTML：
<!DOCTYPE html><html><head><script src="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定义了一个包含几个元素的表单。注意如何有动作和方法属性。它们定义了表单提交的位置和方式。当您使用AJAX时不需要它们，但是使用它们是一个好主意，因为它可以确保您的网站的访问者在禁用JavaScript的情况下仍然可以使用它。这个页面包括Google在其CDN上托管的jQuery。头部包含一个脚本标记——这是编写代码的地方。
这个表单现在看起来可能有点枯燥，所以您可能需要考虑学习CSS来让它更生动一些。
javascript
有几种方法可以使用JavaScript提交表单。第一个也是最简单的方法是通过submit方法：
document.getElementById('myForm').submit();当然，如果愿意的话，可以使用jQuery将表单作为目标——这没有什么区别：
$('#myForm').submit();这个命令告诉浏览器提交表单，就像按提交按钮一样。它通过它的id将表单作为目标，在本例中，这就是myForm。这不是AJAX，因此它将重新加载整个页面——这并不总是令人满意的。
在表单的method属性中，指定了如何提交表单。这可以是POST或GET。使用AJAX提交表单时不使用此属性，但可以使用相同的方法。
现代网络的许多功能都是通过GET或POST请求来实现的。一般来说，GET用于检索数据，POST用于发送数据（并返回响应）。数据可以通过GET发送，但是POST几乎总是更好的选择，尤其是对于表单数据。您以前可能见过GET请求--它们发送附加到URL的数据：
somewebsite.com/index.html?name=Joe问号告诉浏览器，紧跟其后的任何数据都不用于遍历网站，而是应该传递到页面，供其处理。这很适用于简单的事情，如页码，但也有一些缺点：
最大字符数限制：url中可以发送的字符数上限。如果您试图发送大量数据，则可能没有足够的数据。
可见性：任何人都可以看到GET请求中发送的数据——这对密码或表单数据等敏感数据都没有好处。
POST请求的工作方式类似，只是它们不发送URL中的数据。这意味着可以发送更多的数据（数据称为有效负载），并且通过不公开数据来获得一些安全性。尽管如此，数据仍然可以很容易地访问，因此如果您想完全放心，请查看SSL证书。
无论使用POST还是GET，数据都以键->；值对发送。在上面的URL中，键是name，值是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请求的优秀免费工具。
如果您想在按下submit按钮时使用AJAX提交表单，那么同样简单。您需要将代码附加到表单的提交事件。代码如下：
$(document).on('submit','#myForm',function(){ $.post('some/url', $('#myForm').serialize()); return false;});这段代码做了几件事。提交表单后，浏览器将首先运行代码。然后，代码使用AJAX提交表单数据。所需的最后一步是防止原始表单提交——您已经用AJAX完成了这项工作，所以您不希望再次发生这种情况！
如果希望在AJAX完成后执行其他任务（或者甚至返回状态消息），则需要使用回调。JQuery使这些工具非常易于使用——只需将函数作为另一个参数传递如下：
$.post('url', $('#myForm').serialize(), function(result) { c***ole.log(result);}result参数包含数据发送到的url返回的任何数据。您可以轻松地响应此数据：
if(result == 'success') { // do some task}else { // do some other task}这篇文章到此为止。希望您现在对HTTP请求以及AJAX如何在表单上下文中工作有了深入的了解。
你今天学了什么新把戏吗？如何在表单中使用AJAX？请在下面的评论中告诉我们您的想法！
图片来源：vectorfusionart/Shutterstock
- 发表于 2021-03-14 16:09
- 阅读 ( 213 )
- 分类：编程
你可能感兴趣的文章
卡克普(cakephp)和视频教程(codeigniter)的区别
...区别在于CakePHP提供了一个内置的ORM，而CodeIgniter必须为ORM使用第三方库。CakePHP和CodeIgniter之间的另一个重要区别是CakePHP具有代码生成控制台、预定义的自动调用函数和内置Ajax支持，而CodeIgniter没有这些功能，需要独立插件的支...
阿贾克斯(ajax)和jquery公司(jquery)的区别
...境。Ajax和jQuery的关键区别在于jQuery更像一个框架，它是使用JavaScript构建的，而Ajax则是一种使用JavaScript与服务器通信的技术或方式，而无需重新加载web页面。jQuery的许多功能都使用Ajax。Ajax和jQuery齐头并进，很难比较这两种语言...
什么是cgi脚本，它们如何改进网站？
CGI代表公共网关接口。它是web服务器执行程序并为web浏览器生成输出的标准协议。该程序被称为CGI程序（或CGI脚本）。当用户的web浏览器请求特定的URL时，它代表web服务器执行以产生输出。 ...
如何创建一个免费的网站联系形式与谷歌形式
... 这完全取决于你如何使用表格，以及你想为访问者提供什么样的联系方式。 ...
什么是csrf攻击？如何防止它们？
... 攻击者如何利用csrf劫持会话：示例 ...
使用google表单创建一个基于web的调查
...部分、将其拆分为多个页面或添加图像和视频。 相关：如何在互联网上协作处理文档 尽管它的外观很简单，但是使用这个工具可以做很多事情。例如，您可以根据调查对象回答问题的方式，将他们发送到不同的问题页面。你可...
如何使用imacros自动化重复的web浏览器任务
...os会保存宏。我们可以点击播放按钮播放宏，iMacros将访问如何极客，选择表单字段，输入我们的搜索查询，并提交表单。虽然你可以通过在这里的搜索页面上加上书签来实现这个结果，但是有些网站并没有那么方便。在那些迫使...
闪光(flash)和ajax(ajax)的区别
...从而改善网站访问者的总体web体验。两者的主要区别在于如何实现目标。Flash是一个完整的平台，在一个整洁的包中提供您所需要的一切。另一方面，AJAX只是现有web技术的集合，包括XML、HTML、DOM、CSS和Javascript。Javascript是将它们...
javascript语言(javascript)和ajax(ajax)的区别
...着越来越复杂的作用。 从某种意义上说，互联网是通过使用标准化工具、方法、编程和脚本语言创建的网站和web应用程序的集合，所有这些都是现代web开发的基础。JavaScript和AJAX等脚本语言允许web开发人员创建一种更有效的方法...
AJAX(ajax)和dhtml公司(dhtml)的区别
...DHTML（dynamichtml）不是一种编码语言，而是一组与HTML一起使用的技术，以使HTML更具交互性。DHTML根据用户的操作更改网页上的元素。AJAX允许浏览器一次请求一个特定元素，以减少服务器和Internet连接的压力。 互联网上的网页并...
0 篇文章
