关于javascript:jquery ajax提交表单


jQuery AJAX submit form

我有一个名为orderproductForm的表单，输入的数量不确定。

我想做一些jquery.get或ajax之类的工作，通过ajax调用一个页面，并发送表单orderproductForm的所有输入。

我想有一种方法是

1
2
3
4
5
jQuery.get("myurl",
          {action : document.orderproductForm.action.value,
           cartproductid : document.orderproductForm.cartproductid.value,
           productid : document.orderproductForm.productid.value,
           ...

但是，我并不完全知道所有表单输入。是否有只发送所有表单输入的功能、功能或其他内容？

这是一个简单的参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// this is the id of the form
$("#idForm").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    var form = $(this);
    var url = form.attr('action');

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


});

希望对你有帮助。

相关讨论

可以使用Ajax表单插件或jQuery序列化函数中的AjaxForm/AjaxSubmit函数。

AjaxForm：

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

或

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

按下提交按钮时将发送AjaxForm。AjaxSubmit立即发送。

Serialize：

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

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

这里是Ajax序列化文档。

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form id="contactForm1" action="/your_url" method="post">
    <!-- Form input fields here (do not forget your name attributes). -->
</form>

<script type="text/javascript">
    var frm = $('#contactForm1');

    frm.submit(function (e) {

        e.preventDefault();

        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        });
    });
相关讨论

你需要记住一些事情。

1。提交表单有几种方法

  • 使用提交按钮
  • 按Enter键
  • 通过在javascript中触发提交事件
  • 可能更多取决于设备或未来的设备。

因此，我们应该绑定到表单提交事件，而不是按钮单击事件。这将确保我们的代码可以在现在和将来的所有设备和辅助技术上工作。

2。希贾克斯

用户可能没有启用javascript。hijax模式在这里很好，我们使用javascript轻轻地控制表单，但是如果javascript失败，就让它可以提交。

我们应该从表单中提取URL和方法，因此如果HTML发生变化，我们不需要更新JavaScript。

三。不引人注目的javascript

使用event.preventdefault()而不是return false是一个很好的实践，因为它允许事件冒泡。这使得其他脚本可以与事件相关联，例如，可以监视用户交互的分析脚本。

速度

理想情况下，我们应该使用外部脚本，而不是直接插入脚本。我们可以使用脚本标记在页面的头部分链接到这个，或者在页面的底部链接到它以获取速度。该脚本应该悄悄地增强用户体验，而不是阻碍。

代码

假设您同意上述所有内容，并且希望捕获提交事件，并通过Ajax(Hijax模式)处理它，您可以这样做：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function() {
  $('form.my_form').submit(function(event) {
    event.preventDefault(); // Prevent the form from submitting via the browser
    var form = $(this);
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize()
    }).done(function(data) {
      // Optionally alert the user of success here...
    }).fail(function(data) {
      // Optionally alert the user of an error here...
    });
  });
});

您可以随时通过javascript手动触发表单提交，方法如下：

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

编辑：

我最近不得不这么做，结果写了一个插件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
(function($) {
  $.fn.autosubmit = function() {
    this.submit(function(event) {
      event.preventDefault();
      var form = $(this);
      $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize()
      }).done(function(data) {
        // Optionally alert the user of success here...
      }).fail(function(data) {
        // Optionally alert the user of an error here...
      });
    });
    return this;
  }
})(jQuery)

将数据自动提交属性添加到表单标记中，然后可以执行以下操作：

HTML

1
2
3
<form action="/blah" method="post" data-autosubmit>
  <!-- Form goes here -->
</form>

JS

1
2
3
$(function() {
  $('form[data-autosubmit]').autosubmit();
});
相关讨论

您还可以使用FormData(但在IE中不可用)：

1
2
3
4
5
6
7
8
9
10
11
12
var formData = new FormData(document.getElementsByName('yourForm')[0]);// yourForm: form selector        
$.ajax({
    type:"POST",
    url:"yourURL",// where you wanna post
    data: formData,
    processData: false,
    contentType: false,
    error: function(jqXHR, textStatus, errorMessage) {
        console.log(errorMessage); // Optional
    },
    success: function(data) {console.log(data)}
});

这就是使用formdata的方法。

相关讨论

简单版本(不发送图像)

1
2
3
4
5
6
7
8
9
10
11
12
13
<form action="/my/ajax/url" class="my-form">
...
</form>

    (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);

将表格或所有表格的未加修饰部分复制并粘贴到页面上

这是Alfrekjv答案的修改版

  • 它将与jquery一起工作>=1.3.2
  • 您可以在文档准备好之前运行它
  • 您可以删除并重新添加表单，它仍然有效
  • 它将发布到与正常表单相同的位置，在表单的"action"属性

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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请求，因此不会发送按钮单击。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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);
            }
        });
    }
});

在服务器端，您可以使用jquery设置HTTP_X_REQUESTED_WITH的头文件检测Ajax请求。对于PHP

PHP

1
2
3
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is ajax
}
相关讨论

此代码即使与文件输入一起工作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(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)
        {


        }
    });        
});
相关讨论

我真的很喜欢这个超亮度的答案，尤其是他包装的方式是jquery插件中的解决方案。所以多亏了超亮度的一个非常有用的答案。不过，在我的例子中，我需要一个插件，它允许我在插件初始化时通过选项定义成功和错误事件处理程序。

我想到的是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
;(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);

这个插件允许我很容易地在页面上"Ajaxify"HTML表单，并提供onSubmit、Success和Error事件处理程序，以便向用户提供表单提交状态的反馈。这使得插件可以如下使用：

1
2
3
4
5
6
7
8
9
10
11
 $('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方法的相应事件接收的参数相同。

我有以下信息：

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

在哪里？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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();
    });
}

这假定"url"的post返回一个形式为{success: false, error:'my Error to display'}的ajax。

你可以随意改变。请随意使用这段代码。

相关讨论

jquery ajax提交表单，只不过是在单击按钮时使用表单ID提交表单。

请按步骤操作

步骤1-表单标记必须具有ID字段

1
2
3
<form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>

要单击的按钮

1
<button>Save</button>

步骤2-提交事件位于jquery中，它有助于提交表单。在下面的代码中，我们准备来自HTML元素名的JSON请求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$("#submitForm").submit(function(e) {
    e.preventDefault();
    var frm = $("#submitForm");
    var data = {};
    $.each(this, function(i, v){
        var input = $(v);
        data[input.attr("name")] = input.val();
        delete data["undefined"];
    });
    $.ajax({
        contentType:"application/json; charset=utf-8",
        type:frm.attr("method"),
        url:frm.attr("action"),
        dataType:'json',
        data:JSON.stringify(data),
        success:function(data) {
            alert(data.message);
        }
    });
});

点击下面的链接进行现场演示

如何使用jquery ajax提交表单？

考虑使用EDOCX1[1]

1
2
3
4
5
6
7
8
9
10
11
12
$('table+table form').closest('tr').filter(':not(:last-child)').submit(function (ev, frm) {
        frm = $(ev.target).closest('form');
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert(data);
            }
        })
        ev.preventDefault();
    });

您可以使用如下提交功能。

HTML表单

1
2
3
4
5
<form class="form" action="" method="post">
    <input type="text" name="name" id="name">
    <textarea name="text" id="message" placeholder="Write something to us"> </textarea>
    <input type="button" onclick="return formSubmit();" value="Send">
</form>

jquery函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    function formSubmit(){
        var name = document.getElementById("name").value;
        var message = document.getElementById("message").value;
        var dataString = 'name='+ name + '&message=' + message;
        jQuery.ajax({
            url:"submit.php",
            data: dataString,
            type:"POST",
            success: function(data){
                $("#myForm").html(data);
            },
            error: function (){}
        });
    return true;
    }

有关更多详细信息和示例，请访问：网址：http://www.spiderscode.com/simple-ajax-contact-form/

如果您使用的是form.serialize()-您需要给每个表单元素一个这样的名称：

1
<input id="firstName" name="firstName" ...

表单序列化如下：

1
firstName=Chris&lastName=Halcrow ...

要避免发送多个FormData，请执行以下操作：

别忘了在表单再次提交之前解除提交事件的绑定，用户可以多次调用sumbit函数，可能是忘记了什么，或者是验证错误。

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

还有Submit事件，可以像这样触发$(Form_ID").Submit()。如果表单已经在HTML中很好地表示，则可以使用此方法。您只需在页面中阅读，用东西填充表单输入，然后调用.submit()。它将使用表单声明中定义的方法和操作，因此不需要将其复制到JavaScript中。

实例

相关讨论