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,
           ...

然而，我不知道确切地所有表单输入。是否有一个特性，功能或一些东西，只是发送所有的表单输入?

当前回答

jQuery AJAX提交表单，就是当你点击一个按钮时使用表单ID提交一个表单

请按步骤操作

步骤1 -表单标签必须有一个ID字段

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

按钮，你要点击

<button>Save</button>

第2步-提交事件是在jQuery中帮助提交表单。在下面的代码中，我们从HTML元素名准备JSON请求。

$("#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提交表单?

2018-01-11 08:05:00

其他回答

你可以使用Ajax Form Plugin或jQuery serialize函数中的ajaxForm/ajaxSubmit函数。

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序列化文档在这里。

2009-12-25 01:36:52

简单版(不发送图像)

<form action="/my/ajax/url" class="my-form">
...
</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>

复制并粘贴页面上的一个窗体或所有窗体的一个窗体

这是Alfrekjv的答案的修改版本

它将使用jQuery >= 1.3.2 您可以在文档准备好之前运行该命令您可以删除并重新添加表单，它仍然可以工作它将发布到与标准表单相同的位置，在表单的“action”属性

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

在服务器端，你可以用jquery设置HTTP_X_REQUESTED_WITH的报头来检测ajax请求为php

PHP

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

2013-07-10 09:35:18

我得到了以下信息:

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'}

你可以随意改变。请随意使用该片段。

2014-01-21 20:47:00

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

例子

2009-12-25 04:50:34