jQuery form外掛--ajaxFrom和ajaxSubmit的使用
阿新 • • 發佈:2019-02-02
1.ajaxSubmit 和ajaxForm區別
ajaxForm
ajaxForm()不能提交表單。在document的ready函式中,使用ajaxForm來為AJAX提交表單進行準備。提交動作必須由submit開始
ajaxForm()適用於以表單提交方式處理ajax技術(需要提供表單的action、id、 method,最好在表單中提供submit按鈕)它大大簡化了使用ajax技術提交表單時的資料傳遞問題,使用ajaxForm()你不需要逐個的以 JavaScript的方式獲取每個表單屬性的值,並且也不需要在請求路徑後面通過url重寫的方式傳遞資料。ajaxForm()會自動收集當前表單中每個屬性的值,然後將其以表單提交的方式提交到目標url。這種方式提交資料較安全,並且使用起來更簡單,不必寫過多冗餘的JavaScript程式碼
ajaxSubmit
ajaxSubmit()馬上由AJAX來提交表單。你可以在任何情況下進行該項提交。
ajaxSubmit()適用於以事件的機制以ajax提交form表單(超連結、圖片的click事件),該方法作用與ajaxForm()類似,但它更為靈活,因為他依賴於事件機制,只要有事件存在就能使用該方法。你只需指定該form的action屬性即可,不需要提供submit按鈕。
2.依賴的外掛
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery.js" ></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery.form.js"></script>
3.使用測試
<script type="text/javascript">
$(function() {
var option = {
url : '${pageContext.request.contextPath}/ajax/ajaxSubmit.do',
type : 'post' ,
dataType : 'json',//指定返回的資料型別,無需再對json字串進行解析。
data : {},
success : function(data) {
alert(data.msg);
}
};
$("#myForm").ajaxForm(option).submit(function(){
return false;//防止預設的提交動作,即防止二次提交
});
$('#myForm').submit(function() {
$('#myForm').ajaxSubmit(option);
return false;//防止二次提交
});
//普通事件也能通過ajaxSubmit提交表單
$('#button').click(function() {
$('#myForm').ajaxSubmit(option);
});
});
</script>
ajaxForm和ajaxSubmit方法的引數同$.ajax的引數。
引數 | 含義 |
---|---|
url | 請求路徑 |
data | json格式的引數 |
type | 請求型別 |
success | 成功的回撥函式 |
error | 請求失敗的回撥函式 |
dataType | 預期伺服器返回的型別,若指定json,則無需再解析json字串 |
contentType | 指定傳送的資料型別 |