吐槽一下先
好久沒開發了,今天遇到一個客戶form提交的問題,想把form提交從同步變成ajax的異步方式,在網頁接受返回來的數據,使用的是jquery from插件,於是網上搜了一圈,博客園,csdn,發現幾乎99%全都是錯的,剩下的1%排版也有問題,很不好看,浪費了大量的時間,然后去官方看文檔十分鍾就解決了,真是傷不起。現在國內的博客都是粘貼復制就成一篇文章,這個現象csdn最嚴重,博客園還好些,有點原創的東西,大牛也多。
開始正文
這個插件的使用方法呢根本不是像網上很多博客說的如下所示的使用方法
$('#myForm02').ajaxForm(function (sesponseTest) { //$("#comment").val(sesponseTest); alert("Thank you for your comment!" + sesponseTest); });
而是像我下圖這樣的使用方法
$(document).ready(function () { var picString = ""; var options = { target: '#output2', // target element(s) to be updated with server response success: function () { alert("success"); }// post-submit callback // other available options: //url: url // override for form's 'action' attribute //type: type // 'get' or 'post', override for form's 'method' attribute //dataType: null // 'xml', 'script', or 'json' (expected server response type) //clearForm: true // clear all form fields after successful submit //resetForm: true // reset the form after successful submit // $.ajax options can be used here too, for example: //timeout: 3000 }; $('#myForm02').submit(function () { $(this).ajaxSubmit(options); return false; //阻止表單默認提交 });
需要先定義一個options參數,然后根據自己的情況給options參數的各屬性賦值,然后再調用,我這邊使用的是ajaxsubmit方法,ajaxform使用也是這樣的。
關於ajaxForm
和ajaxSubmit的區別
ajaxform是被動的提交,而ajaxsubmit是主動的提交,這樣說起來可能有點難於理解,簡單來說其實就是ajaxform就等於下圖的這種調用方式
$('#myForm02').submit(function () { $(this).ajaxSubmit(options); return false; //阻止表單默認提交 });
tips
使用這個插件要注意jquery的版本要是1.7才可以,我嘗試的時候使用3.3.1是會報錯的。
最后附上jquery form的官網,大家如果還有疑問的話,可以直接去那上面看看 http://malsup.com/jquery/form/