javascript - js获取form表单数据 - 表单提交文件




jQuery AJAX提交表单 (10)

简单版本(不发送图像)

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

复制并粘贴页面上的表单或所有表单的Ajax化

这是答案的修改版本

  • 它将使用jQuery> = 1.3.2
  • 您可以在文档准备好之前运行它
  • 你可以删除并重新添加表单,它仍然可以工作
  • 它将发布到与表单的“操作”属性中指定的常规表单相同的位置

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

在服务器端,你可以检测到一个Ajax请求 ,这个头文件jQuery为HTTP_X_REQUESTED_WITH设置HTTP_X_REQUESTED_WITH

PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is 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提交表单?


你可以在下面的提交函数中使用它。

HTML表单

<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功能:

<script>
    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;
    }
</script>

欲了解更多详情和样品,请访问: http://www.spiderscode.com/simple-ajax-contact-form/ : http://www.spiderscode.com/simple-ajax-contact-form/


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

<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);
            },
        });
    });
</script>

如果您使用.serialize() 形式 - 您需要为每个表单元素指定一个名称,如下所示:

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

表单被这样序列化:

firstName=Chris&lastName=Halcrow ...

您也可以使用FormData (但在IE中不可用):

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


我为我得到以下信息:

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

这假定'url'的帖子以{success: false, error:'my Error to display'}的形式返回一个ajax {success: false, error:'my Error to display'}

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


我真的很喜欢superluminary 这个答案 ,尤其是他包装的方式是jQuery插件中的解决方案。 所以感谢的一个非常有用的答案。 但在我的情况下,我想要一个插件,它允许我在插件初始化时通过选项定义成功错误事件处理程序。

所以这就是我想到的:

;(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表单,并提供onsubmitsuccesserror事件处理程序来实现向用户提交表单提交状态的反馈。 这允许插件如下使用:

 $('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方法的相应事件中收到的相同参数。


考虑使用closest

$('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();
    });

还有提交事件,可以像这样触发$(“#form_id”)。submit()。 如果表单在HTML中已被很好地表示,那么您将使用此方法。 您只需在页面中阅读,填写表单输入内容,然后调用.submit()。 它将使用表单声明中定义的方法和动作,因此您无需将其复制到JavaScript中。

examples







html-form