jquery - jQuery AJAX提交表单

  显示原文与译文双语对照的内容

我有一个名为orderproductForm的表单和一个未定义的输入数。

我想做一些 jQuery.get 或者Ajax或者任何类似于通过Ajax调用页面的东西,并沿着表单的所有输入发送。

我想一种方法就是做一些


jQuery.get("myurl",
 {action : document.orderproductForm.action.value,
 cartproductid : document.orderproductForm.cartproductid.value,
 productid : document.orderproductForm.productid.value,
. . .

但是我不知道所有的表单输入。 是否有一个功能,函数或者什么可以发送所有表单输入?

谢谢

时间:

你可以使用从 Ajax表单插件 ajaxform/ajaxsubmit函数或者jQuery的序列化函数。

AjaxForm:


$("#theForm").ajaxForm({url: 'server.php', type: 'post'})

或者


$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})

按下提交按钮时ajaxForm将发送。 ajaxSubmit立即发送。

序列化:


$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theform').serialize())

AJAX序列化文档在这里是

这是一个简单的引用:


//this is the id of the form
$("#idForm").submit(function() {

 var url ="path/to/your/script.php";//the script where you handle the form input.

 $.ajax({
 type:"POST",
 url: url,
 data: $("#idForm").serialize(),//serializes the form's elements.
 success: function(data)
 {
 alert(data);//show response from the php script.
 }
 });

 return false;//avoid to execute the actual submit of the form.
});

我希望它能帮助你。

使用表单元素上定义的属性的另一个类似解决方案:


<form id="contactForm1" action="/your_url" method="post">
. . .
</form>

<script type="text/javascript">
 var frm = $('#contactForm1');
 frm.submit(function (ev) {
 $.ajax({
 type: frm.attr('method'),
 url: frm.attr('action'),
 data: frm.serialize(),
 success: function (data) {
 alert('ok');
 }
 });

 ev.preventDefault();
 });
</script>

你需要记住的事情有几个。

1.有几种方法可以将表单提交

  • 使用提交按钮
  • 按enter键
  • 通过在JavaScript中触发提交事件
  • 可能更具体取决于设备或者未来设备。

因此,我们应该绑定到提交事件,而不是button按钮click事件。 这将确保我们的代码能够在所有设备和辅助技术上运行,并且在未来。

2.Hijax

用户可能没有启用 JavaScript 。 一个 hijax 模式是好的在这里,在我们轻轻获得控制窗体的使用 JavaScript,但给它submittable如果JavaScript将失败。

我们应该从表单中提取URL和方法,所以如果HTML改变,我们就不需要更新 JavaScript 。

3 。低调的JavaScript

使用 event.preventDefault() 代替 return false 是中很好的实践,因为它允许将事件以冒泡 这使得其他脚本可以绑定到事件,例如可以监视用户交互的分析脚本。

正常脚本应该被链接到页面的其中头部分,增强了用户体验,而不是符号取代。

代码

假设你同意上述所有内容,并且希望捕获提交事件并通过 AJAX ( hijax模式) 处理,你可以执行如下操作:


$(function() {
 $('form.my_form').submit(function(event) {
 var form = $(this);
 $.ajax({
 type: form.attr('method'),
 url: form.attr('action'),
 data: form.serialize()
 }).done(function() {
//Optionally alert the user of success here...
 }).fail(function() {
//Optionally alert the user of an error here...
 });
 event.preventDefault();//Prevent the form from submitting via the browser.
 });
});

你可以随时通过使用类似以下内容的JavaScript来手动触发表单提交:


$(function() {
 $('form.my_form').trigger('submit');
});

编辑:

我最近不得不这么做,最后写了一个插件。


(function($) {
 $.fn.autosubmit = function() {
 this.submit(function(event) {
 var form = $(this);
 $.ajax({
 type: form.attr('method'),
 url: form.attr('action'),
 data: form.serialize()
 }).done(function() {
//Optionally alert the user of success here...
 }).fail(function() {
//Optionally alert the user of an error here...
 });
 event.preventDefault();
 });
 }
})(jQuery)

将data-autosubmit属性添加到表单标记中,然后你可以执行以下操作:


$(function() {
 $('form[data-autosubmit]').autosubmit();
});

简单版本( 不发送图像)


<form action="/my/ajax/url">
...
</form>
<script>
 (function($){
 $("body").on("submit",".my-form", function(e){
 e.preventDefault();
 var form = $(e.target);
 $.post( form.attr("action"), form.serialize(), function(res){
 console.log(res);
 });
 });
 )(jQuery);
</script>

在页面上复制并粘贴表单或者所有表单的ajaxification

这是一个经过修改的 alfrekjv答案版本

  • 它将使用 jQuery> = 1.3.2
  • 你可以在文档准备好之前运行它
  • 你可以删除和 re-add,它仍然可以工作
  • 它将投递到与标准表单相同的位置,在"窗体的动作"属性中指定

Javascript


jQuery(document).submit(function(e){
 var form = jQuery(e.target);
 if(form.is("#form-id")){//check if this is the form that you want (delete this check to apply this to all forms)
 e.preventDefault();
 jQuery.ajax({
 type:"POST",
 url: form.attr("action"), 
 data: form.serialize(),//serializes the form's elements.
 success: function(data) {
 console.log(data);//show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
 }
 });
 }
});

我想编辑alfrekjv的答案,但偏离了太多,所以决定把它作为一个单独的答案。

不发送文件,不支持按钮,例如单击按钮( 包括提交按钮) 将它的值作为表单数据发送,但这是一个ajax请求单击将不会发送。

要支持按钮,可以捕获实际按钮单击而不是提交。


jQuery(document).click(function(e){
 var self = jQuery(e.target);
 if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
 e.preventDefault();
 var form = self.closest('form'), formdata = form.serialize();
//add the clicked button to the form data
 if(self.attr('name')){
 formdata += (formdata!=='')? '&':'';
 formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
 }
 jQuery.ajax({
 type:"POST",
 url: form.attr("action"), 
 data: formdata, 
 success: function(data) {
 console.log(data);
 }
 });
 }
});

使用这个头文件,它在服务器上为 php, jquery设置 HTTP_X_REQUESTED_WITH 侧面可以检测一个ajax请求

PHP


if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
//is ajax
}

在这次新 plugin,我都非常喜欢这个回答被 superluminary 和尤其是他的方式封装风格是解决办法, 因此,感谢 superluminary的一个非常有用的答案。 在我的例子中,虽然,我想要一个插件工具,那样我和 错误事件处理函数来定义成功借助这里插件初始化时的各种选项。

下面是我的结果:


;(function(defaults, $, undefined) {
 var getSubmitHandler = function(onsubmit, success, error) {
 return function(event) {
 if (typeof onsubmit === 'function') {
 onsubmit.call(this, event);
 }
 var form = $(this);
 $.ajax({
 type: form.attr('method'),
 url: form.attr('action'),
 data: form.serialize()
 }).done(function() {
 if (typeof success === 'function') {
 success.apply(this, arguments);
 }
 }).fail(function() {
 if (typeof error === 'function') {
 error.apply(this, arguments);
 }
 });
 event.preventDefault();
 };
 };
 $.fn.extend({
//Usage:
//jQuery(selector).ajaxForm({ 
//onsubmit:function() {},
//success:function() {}, 
//error: function() {} 
//});
 ajaxForm : function(options) {
 options = $.extend({}, defaults, options);
 return $(this).each(function() {
 $(this).submit(getSubmitHandler(options['onsubmit'], options['success'], options['error']));
 });
 }
 });
})({}, jQuery);

这个插件使我能够很轻易"革命性化"网页上的超文本标记语言方式,并提供 onsubmit,成功和 错误事件处理函数用于实现的状态反馈给用户的表单提交。 这允许插件使用如下:


 $('form').ajaxForm({
 onsubmit: function(event) {
//User submitted the form
 },
 success: function(data, textStatus, jqXHR) {
//The form was successfully submitted
 },
 error: function(jqXHR, textStatus, errorThrown) {
//The submit action failed
 }
 });

请注意,成功和 错误事件处理函数,你会得到从收到相同的参数的相应事件 jQuery ajax 方法。

我得到以下信息:


formSubmit('#login-form', '/api/user/login', '/members/');

火警的警铃在哪里?


function formSubmit(form, url, target) {
 $(form).submit(function(event) {
 $.post(url, $(form).serialize())
. done(function(res) {
 if (res.success) {
 window.location = target;
 }
 else {
 alert(res.error);
 }
 })
. fail(function(res) {
 alert("Server Error:" + res.status +"" + res.statusText);

 })
 event.preventDefault();
 });
}

这假设post到'url'以以下形式返回一个 ajax {success: false, error:'my Error to display'}

你可以根据喜好改变它。 欢迎使用该 Fragment 。

这里代码即使在文件输入时也有效


$(document).on("submit","form", function(event)
{
 event.preventDefault(); 
 $.ajax({
 url: $(this).attr("action"),
 type: $(this).attr("method"),
 dataType:"JSON",
 data: new FormData(this),
 processData: false,
 contentType: false,
 success: function (data, status)
 {

 },
 error: function (xhr, desc, err)
 {


 }
 }); 
});

要避免多个formdata发送:

不要忘记取消提交提交事件,在表单再次提交之前,用户可以多次调用sumbit函数,也许他忘了某些东西,或者是一个验证错误。


 $("#idForm").unbind().submit( function(e) {
. . ..

...