jQuery AJAX提交表单

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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

我想做某种jQuery.get或ajax或类似的事情，它将通过Ajax调用页面，并发送所有形式为orderproductForm的输入。

我想一种方法是做类似的事情

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

但是我不完全知道所有的表格输入。是否有仅发送所有表单输入的功能部件或功能？

#1楼

使用在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>

#2楼

您也可以使用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的方式。

#3楼

您需要牢记一些事情。

1.有几种提交表格的方法

使用提交按钮
通过按回车
通过触发JavaScript中的Submit事件
可能更多取决于设备或将来的设备。

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

2. Hijax

用户可能未启用JavaScript。 hijax模式在这里很不错，在这里我们可以使用JavaScript轻轻地控制表单，但是如果JavaScript失败，则可以提交表单。

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

3.简洁的JavaScript

使用event.preventDefault（）代替return false是一个好习惯，因为它使事件冒泡。这使其他脚本可以加入事件，例如可能正在监视用户交互的分析脚本。

速度

理想情况下，我们应该使用外部脚本，而不是内联插入脚本。我们可以使用脚本标签在页面的顶部链接到此，或在页面底部链接以提高速度。该脚本应该悄悄地增强用户体验，而不是妨碍用户。

码

假设您同意以上所有内容，并且想要捕获Submit事件并通过AJAX（hijax模式）进行处理，则可以执行以下操作：

$(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使用以下方式手动触发表单提交：

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

编辑：

我最近不得不这样做，最终写了一个插件。

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

将data-autosubmit属性添加到您的表单标签中，然后您可以执行以下操作：

的HTML

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

JS

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

#4楼

简单版本（不发送图像）

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

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

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

在服务器端，您可以使用此标头检测到ajax请求，该标头由jquery为php设置HTTP_X_REQUESTED_WITH

的PHP

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

#5楼

您可以使用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序列化文档在这里。

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3143622

标签

Ajax Submit

Ajax Form

jquery