jQuery AJAX提交表单
我有一个名称为orderproductForm
的表单,输入的数量未定。
我想做一些jQuery.get或ajax或类似的东西,通过Ajax调用一个页面,并将表单orderproductForm
的所有输入发送过去。
我想有一种方法是这样做的
jQuery.get("myurl",
{action : document.orderproductForm.action.value,
cartproductid : document.orderproductForm.cartproductid.value,
productid : document.orderproductForm.productid.value,
...
但我并不清楚所有的表单输入。有没有一种功能、函数或东西可以直接发送所有的表单输入?
880
18
这是一个简单的参考。
我希望它能帮助你。
你可以使用Ajax Form Plugin的ajaxForm/ajaxSubmit函数或jQuery的serialize函数。
AjaxForm。
或
ajaxForm将在提交按钮被按下时发送,ajaxSubmit则是立即发送。
序列化。
AJAX序列化文档在此。
另一种类似的解决方案是使用表单元素上定义的属性。
有几件事你需要牢记。
1. 提交表格的方式有几种。
因此,我们应该绑定到表单提交事件,而不是按钮点击事件。 这将确保我们的代码能够在现在和将来的所有设备和辅助技术上工作。
2.Hijax
该用户可能没有启用JavaScript。 在这里,hijax模式是很好的,我们使用JavaScript轻轻地控制表单,但如果JavaScript失败,则让它可提交。
我们应该从表单中提取URL和方法,所以如果HTML发生变化,我们不需要更新JavaScript。
3. 不显眼的JavaScript
使用event.preventDefault()而不是return false是一个很好的做法,因为它允许事件冒泡。 这样可以让其他脚本与事件结合起来,例如可能会监控用户交互的分析脚本。
速度
我们最好使用外部脚本,而不是将我们的脚本内嵌。 我们可以在页面的头部使用脚本标签链接到这个脚本,或者为了速度而链接到页面的底部。 脚本应该静静地提升用户体验,而不是碍事。
代码
假设你同意以上所有的观点,并且你想抓住提交事件,并通过AJAX(一种hijax模式)来处理它,你可以做这样的事情。
你可以通过JavaScript手动触发表单提交,只要你喜欢,使用这样的东西。
编辑:
我最近不得不这样做,最后写了一个插件。
在你的表单标签中添加一个data-autosubmit属性,然后你就可以这样做了。
HTML
JS
您也可以使用FormData(但在IE中无法使用)。
这是您使用[FormData][1]的方法。
[1]: https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects
简单版(不发送图片
复制并粘贴页面上的一个表单或所有表单的ajaxification。
这是Alfrekjv's答案的修改版。
脚本语言
我想编辑Alfrekjv'的回答,但是偏离太多,所以决定把这个作为一个单独的回答发布。
不发送文件,不支持按钮,例如点击一个按钮(包括提交按钮)会将其值作为表单数据发送,但由于这是一个ajax请求,按钮点击不会被发送。
为了支持按钮,你可以捕捉实际的按钮点击而不是提交。
在服务器端可以通过jquery设置的
HTTP_X_REQUESTED_WITH
这个头来检测ajax请求。 对于phpPHP
这段代码即使在有文件输入的情况下也能工作
我非常喜欢[superluminary][2]的[这个答案][1],尤其是他将解决方案包装在一个jQuery插件中的方式。 所以感谢[superluminary][2]提供了一个非常有用的答案。 在我的情况下,我想要一个插件,允许我在插件初始化时通过选项来定义成功和错误事件处理程序。
所以,我想到了下面的办法:{{{6383857}}。
这个插件可以让我非常轻松地"ajaxify" 页面上的html表单,并提供onsubmit、success和error事件处理程序,以实现向用户反馈表单提交的状态。 这使得该插件可以被用于以下方面。
请注意,success和error事件处理程序接收的参数与你从jQuery ajax方法的相应事件中接收的参数相同。
[1]: https://stackoverflow.com/a/16419406/649497 [2]: https://stackoverflow.com/users/687677/superluminary
我得到了以下我。
哪儿
这就假设帖子到'url'。 返回一个ajax,形式为
{success.false, error:'my Error to display'}
。 false, error:'my Error to display'}`。你可以根据自己的喜好来改变这个形式。 请随意使用该代码段。
jQuery AJAX提交表单,无非是当你点击一个按钮时,使用表单ID提交一个表单。
请按照以下步骤操作
步骤1--表格标签必须有一个ID字段。
您要点击的按钮
第二步 - submit事件是在jQuery中帮助提交表单的。 在下面的代码中,我们从HTML元素name准备JSON请求。
现场演示请点击以下链接
[如何使用jQuery AJAX提交表单?][1] 。
[1]: https://www.youtube.com/watch?v=Ln6A5Koo7Bc
考虑使用 "最近的"。
为了避免多次发送formdata。
在表单再次提交之前,别忘了解除对提交事件的绑定。 用户可以多次调用sumbit函数,可能是忘记了什么,或者是验证错误。
如果你使用form.serialize()--你需要给每个表单元素起一个这样的名字。
而表单的序列化是这样的。
你可以在提交功能中使用这个功能,比如下面。
HTML表格
jQuery函数。
更多详情和样品请访问。 http://www.spiderscode.com/simple-ajax-contact-form/
这不是OP'问题的答案。 但如果你不能使用静态表单DOM,你也可以这样尝试。
只是友好地提醒一下,
数据
也可以是一个对象。我知道这是一个与 "jQuery "相关的问题,但现在有了JS ES6,事情就简单多了。 由于没有纯粹的 "javascript "答案,我想我可以通过使用 "fetch() "API来添加一个简单的纯粹的 "javascript "解决方案,在我看来这是更干净的。 这是一种实现网络请求的现代方式。 在你的例子中,由于你已经有了一个表单元素,我们可以简单地使用它来建立我们的请求。
还有一个提交事件,可以像这样触发$("#form_id").submit()。如果表单已经在HTML中得到很好的体现,你就会使用这种方法。你只需读入页面,在表单输入中填充内容,然后调用.submit()。它将使用表单声明中定义的方法和动作,所以你不需要把它复制到你的javascript中。
例子