jQuery使用ajaxSubmit()提交表单示例（转）

桃扇骨 2022-06-15 09:13 214阅读 0赞

这篇文章主要介绍了jQuery使用ajaxSubmit()提交表单示例,使用延第三方插件jquery.form实现,需要的朋友可以参考下：

#### 准备工作： ####

ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法，所以使用此方法需要先引入这个插件。
    
    如下所示：
    
     
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
    
        
        <script type="text/javascript" src="http://malsup.github.io/jquery.form.js"></script>

#### 创建页面： ####

那么，如何通过ajaxSubmit(obj)提交数据呢？首先我们需要一个form：
    
    <form>
        标题：<input type="text" name="title" /><br />
        内容：<textarea name="content"><textarea/><br />
        <button>提交</button>
    </form>

#### jQuery脚本 ####

这里写代码片上面是一个需要提交内容的form，通常情况下，我们直接通过form提交的话，
     提交后当前页面跳转到form的action所指向的页面。然而，很多时候我们比不希望提交表
     单后页面跳转，那么，我们就可以使用ajaxSubmit(obj)来提交数据。使用方法如下所示：
    
    $('button').on('click', function() { 
    
        $('form').on('submit', function() { 
            var title = $('inpur[name=title]').val(),
                content = $('textarea').val();
    
            $(this).ajaxSubmit({
                type: 'post', // 提交方式 get/post
                url: 'your url', // 需要提交的 url
                data: {
                    'title': title,
                    'content': content
                },
                success: function(data) {  // data 保存提交后返回的数据，一般为 json 数据
                    // 此处可对 data 作相关处理
                    alert('提交成功！');
                }
                $(this).resetForm(); // 提交后重置表单
            });
            return false; // 阻止表单自动提交事件
        });
    });

#### 文章来源： ####

本文来自：[http://www.jb51.net/article/48728.htm][http_www.jb51.net_article_48728.htm]

#### 说明：和我上一篇文章对比 ####

1.该文是给form绑定submit事件，最后使用return false 来阻止表单同步提交
    
    2.该文是设置form表单的action、method、form表单的表单项

[http_www.jb51.net_article_48728.htm]: http://www.jb51.net/article/48728.htm