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

建站1350 更新时间：2025-06-07 23:16:59

2023年6月21日发(作者：)

jQuery使⽤ajaxSubmit（）提交表单⽰例ajaxSubmit(obj)⽅法是jQuery的⼀个插件⾥⾯的⽅法，所以使⽤此⽅法需要先引⼊这个插件。如下所⽰：复制代码代码如下:那么，如何通过ajaxSubmit(obj)提交数据呢？⾸先我们需要⼀个form：XHTML复制代码代码如下:

标题：
内容：

<textarea/><br />    <button>提交</button></form>上⾯是⼀个需要提交内容的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; // 阻⽌表单⾃动提交事件    });});</p><p><p></p></img></p><p>2023年6月21日发(作者：)</p><p></p><p></img></p><p>jQuery使⽤ajaxSubmit（）提交表单⽰例ajaxSubmit(obj)⽅法是jQuery的⼀个插件⾥⾯的⽅法，所以使⽤此⽅法需要先引⼊这个插件。如下所⽰：复制代码 代码如下:<script src="/"></script><script src="/"></script>那么，如何通过ajaxSubmit(obj)提交数据呢？⾸先我们需要⼀个form：XHTML复制代码 代码如下:<form>    标题：<input type="text" name="title" /><br />    内容：<textarea name="content"><textarea/><br />    <button>提交</button></form>上⾯是⼀个需要提交内容的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; // 阻⽌表单⾃动提交事件    });});</p><p><p></p></img></p></div></article></div><div class="torson info"><div><span>本文发布于:2023-06-21，感谢您对本站的认可！</span></div><div><span>本文链接:</span><a href="http://torson.com.cn/news/1687318206a1805.html" title="jQuery使用ajaxSubmit()提交表单示例">http://torson.com.cn/news/1687318206a1805.html</a></div><div><span>版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。</span></div></div><span class="tag"><i class="iconfont icon-discount" style="font-size:12px;font-weight:bold;opacity:.7;">本文标签：</i><a href="/tag/12.html" target="_blank">jquery表单验证</a></span></div><div class="torson post_comments" id="comments"><div id="comt-respond" class="commentpost"><h4>发布评论
<span><a rel="nofollow" id="cancel-reply" href="#comment" style="display:none;"><small>取消回复</small></a></span></h4><form action="/comment/create/1805.html?safe_token=cTCjc_2BWbSHDLVevw6dtXcXU42CoUcXZhyScGyt0Djv7hlyiJ22HPS0aV7aHY9doWoBOka4yGgTbClIwM9CAJIA_3D_3D" method="post" name="saypl" id="frmSumbit"><input type="hidden" name="doctype" value="1" /><input type="hidden" name="quotepid" value="0" /><div id="comment-tools"><div class="torson tools_text"><textarea placeholder="请在这里留言..." name="message" id="txaArticle" class="text input-block-level comt-area" cols="50" rows="4" tabindex="5">

评论列表（有0条评论）

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

最近发表

相关推荐

标签列表