1. 程式人生 > >jQuery form外掛--ajaxFrom和ajaxSubmit的使用

jQuery form外掛--ajaxFrom和ajaxSubmit的使用

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 指定傳送的資料型別

4. 總結

建議使用ajaxSubmit來提交表單,因為它可以在任何時刻都能提交。