我有一个名为 orderproductForm 的表单和一个未定义的输入数 .
我想做某种jQuery.get或ajax或类似的东西,它会通过Ajax调用页面,并发送形式 orderproductForm 的所有输入 .
我想有一种方法可以做点什么
jQuery.get("myurl",
{action : document.orderproductForm.action.value,
cartproductid : document.orderproductForm.cartproductid.value,
productid : document.orderproductForm.productid.value,
...
但是我并不完全知道所有表格输入 . 是否有一个功能,功能或只发送所有表单输入的东西?
15 回答
简易版(不发送图片)
在页面上复制并粘贴表单或所有表单的ajaxification
它是Alfrekjv's答案的修改版本
它将与jQuery> = 1.3.2一起使用
您可以在文档准备好之前运行它
您可以删除并重新添加表单,它仍然可以使用
它将发布到与表单的"action"属性中指定的普通表单相同的位置
JavaScript的
我想编辑Alfrekjv的答案,但偏离了太多,所以决定将其作为一个单独的答案发布 .
不发送文件,不支持按钮,例如单击按钮(包括提交按钮)将其值作为表单数据发送,但由于这是一个ajax请求,因此不会发送按钮单击 .
要支持按钮,您可以捕获实际的按钮单击而不是提交 .
在服务器端,您可以detect an ajax request使用此标头,jquery为php设置
HTTP_X_REQUESTED_WITH
PHP
您也可以使用 FormData (但在IE中不可用):
这是你如何使用FormData .
jQuery AJAX submit form ,只需在您点击按钮时使用表单ID提交表单
请按照步骤操作
第1步 - 表单标记必须具有ID字段
您要点击的按钮
第2步 - submit 事件在jQuery中,有助于提交表单 . 在下面的代码中,我们正在准备来自HTML元素 name 的JSON请求 .
现场演示点击下面的链接
How to submit a Form using jQuery AJAX?
您需要记住一些事项 .
1. There are several ways to submit a form
使用提交按钮
按Enter键
通过在JavaScript中触发提交事件
可能更多,具体取决于设备或将来的设备 .
因此,我们应该绑定到 form submit event ,而不是按钮单击事件 . 这将确保我们的代码现在和将来都适用于所有设备和辅助技术 .
2. Hijax
用户可能未启用JavaScript . 这里的 hijax 模式非常好,我们可以使用JavaScript轻轻控制表单,但如果JavaScript失败则保持可提交 .
我们应该从表单中提取URL和方法,因此如果HTML发生更改,我们就不需要更新JavaScript .
3. Unobtrusive JavaScript
使用 event.preventDefault() 而不是 return false 是很好的做法,因为它允许事件冒泡 . 这允许其他脚本与事件相关联,例如可能正在监视用户交互的分析脚本 .
Speed
理想情况下,我们应该使用外部脚本,而不是插入内联脚本 . 我们可以使用脚本标记链接到页面的head部分,或者链接到页面底部以获得速度 . 该脚本应该悄然增强用户体验,而不是妨碍用户体验 .
Code
假设您同意以上所有内容,并且想要捕获提交事件,并通过AJAX(hijax模式)处理它,您可以执行以下操作:
您可以随时通过JavaScript手动触发表单提交,例如:
Edit:
我最近不得不这样做,最后写了一个插件 .
将data-autosubmit属性添加到表单标记,然后您可以执行以下操作:
HTML
JS
即使文件输入,此代码也可以使用
为了避免多个formdata发送:
不要忘记取消绑定提交事件,在再次提交表单之前,用户可以多次调用sumbit函数,也许他忘了某些东西,或者是验证错误 .
您可以在提交功能上使用此功能,如下所示 .
HTML表单
jQuery函数:
欲了解更多详情和样本,请访问:http://www.spiderscode.com/simple-ajax-contact-form/
这是一个简单的参考:
我希望它对你有所帮助 .
使用表单元素上定义的属性的另一个类似解决方案
我真的很喜欢this answer superluminary,特别是他包装的方式是jQuery插件中的解决方案 . 所以感谢superluminary一个非常有用的答案 . 但就我而言,我想要一个插件,允许我在初始化插件时通过选项定义成功和错误事件处理程序 .
所以这就是我提出的:
这个插件允许我在页面上非常容易"ajaxify"html表单,并提供onsubmit,成功和错误事件处理程序,以实现表单提交状态的用户反馈 . 这允许插件使用如下:
请注意,成功和错误事件处理程序会收到相同的内容您将从jQuery ajax方法的相应事件中获得的参数 .
我为我得到了以下内容:
哪里
这假设'url'的帖子以
{success: false, error:'my Error to display'}
的形式返回ajax您可以根据需要改变它 . 随意使用该片段 .
您可以使用Ajax Form Plugin中的ajaxForm / ajaxSubmit函数或jQuery序列化函数 .
AjaxForm :
要么
当按下提交按钮时,ajaxForm将发送 . ajaxSubmit立即发送 .
Serialize :
AJAX serialization documentation is here .
还有提交事件,可以像$(“#form_id”) . submit()一样触发 . 如果表单已经在HTML中很好地表示,那么您将使用此方法 . 您只需在页面中读取,使用stuff填充表单输入,然后调用.submit() . 它将使用表单声明中定义的方法和操作,因此您无需将其复制到javascript中 .
examples
如果您正在使用form.serialize() - 您需要为每个表单元素指定一个如下名称:
表单序列化如下:
考虑使用
closest