jQuery使用ajaxSubmit()提交表單示例
ajaxSubmit(obj)方法是jQuery的一個(gè)插件jquery.form.js里面的方法,所以使用此方法需要先引入這個(gè)插件。如下所示:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>
那么,如何通過(guò)ajaxSubmit(obj)提交數(shù)據(jù)呢?首先我們需要一個(gè)form:
XHTML
<form>
標(biāo)題:<input type="text" name="title" /><br />
內(nèi)容:<textarea name="content"><textarea/><br />
<button>提交</button>
</form>
上面是一個(gè)需要提交內(nèi)容的form,通常情況下,我們直接通過(guò)form提交的話, 提交后當(dāng)前頁(yè)面跳轉(zhuǎn)到form的action所指向的頁(yè)面。然而,很多時(shí)候我們比不希望提交表單后頁(yè)面跳轉(zhuǎn),那么,我們就可以使用ajaxSubmit(obj)來(lái)提交數(shù)據(jù)。使用方法如下所示:
$('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 保存提交后返回的數(shù)據(jù),一般為 json 數(shù)據(jù)
// 此處可對(duì) data 作相關(guān)處理
alert('提交成功!');
}
$(this).resetForm(); // 提交后重置表單
});
return false; // 阻止表單自動(dòng)提交事件
});
});
- jquery實(shí)現(xiàn)ajax提交form表單的方法總結(jié)
- jquery中ajax處理跨域的三大方式
- jquery ajax提交表單數(shù)據(jù)的兩種方式
- jquery ajax例子返回值詳解
- JQuery AJAX提交中文亂碼的解決方案
- jquery ajax 向后臺(tái)傳遞數(shù)組參數(shù)示例
- jquery的ajax()函數(shù)傳值中文亂碼解決方法介紹
- 基于JQuery框架的AJAX實(shí)例代碼
- jquery的ajax異步請(qǐng)求接收返回json數(shù)據(jù)實(shí)例
- jQuery Ajax異步處理Json數(shù)據(jù)詳解
- jQuery實(shí)現(xiàn)Ajax功能分析【與Flask后臺(tái)交互】
相關(guān)文章
淺談MVC+EF easyui dataGrid 動(dòng)態(tài)加載分頁(yè)表格
下面小編就為大家?guī)?lái)一篇淺談MVC+EF easyui dataGrid 動(dòng)態(tài)加載分頁(yè)表格。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11jQuery 打造動(dòng)態(tài)下滑菜單實(shí)現(xiàn)說(shuō)明
本教程將分步講解如何使用JQuery和CSS打造一個(gè)炫酷動(dòng)感菜單。2010-04-04jquery 圖片截取工具jquery.imagecropper.js
工作需要參考網(wǎng)上的一些代碼做了個(gè)圖片截取工具,最后干脆封裝成一個(gè)jquery的插件。2010-04-04jquery控制背景音樂(lè)開(kāi)關(guān)與自動(dòng)播放提示音的方法
這篇文章主要介紹了jquery控制背景音樂(lè)開(kāi)關(guān)與自動(dòng)播放提示音的方法,實(shí)例分析了背景音樂(lè)開(kāi)關(guān)的技巧與自動(dòng)播放提示音的常見(jiàn)用法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02jQuery實(shí)現(xiàn)表單驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表單驗(yàn)證功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10setInterval,setTimeout與jquery混用的問(wèn)題
當(dāng)遇到setInterval,setTimeout與jquery混用的問(wèn)題 時(shí),直接按JavaScript中的語(yǔ)法寫(xiě)并不起作用,有以下兩種解決方法2013-04-04jquery插件uploadify多圖上傳功能實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jquery插件uploadify多圖上傳功能實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08解決html-jquery/js引用外部圖片時(shí)遇到看不了或出現(xiàn)403的問(wèn)題
下面小編就為大家?guī)?lái)一篇解決html-jquery/js引用外部圖片時(shí)遇到看不了或出現(xiàn)403的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09