jquery form怎么使用

本篇內容介紹了“jquery form怎么使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

在jquery中，可以利用ajaxForm()和ajaxSubmit()兩個方法來使用“jquery form”，“jquery form”是一個表單異步提交的插件，用于提交表單并設置表單提交的參數，能夠在表單提交前對表單數據進行校驗和處理和表單提交后的函數調用。

本教程操作環境：windows10系統、jquery3.2.1版本、Dell G3電腦。

jquery form怎么用

jquery form是一個表單異步提交的插件，可以很容易提交表單，設置表單提交的參數，并在表單提交前對表單數據進行校驗和處理和表單提交后的函數調用。

這個插件有兩個主要方法：

ajaxForm() 和 ajaxSubmit()，

它們集合了從控制表單元素到決定如何管理提交進程的功能；

他們都可以接受0個或一個參數，參數可以為一個函數或者一個JS對象，類似json格式；

ajaxForm（）不能提交表單，只是為表單提交做準備：

1：傳入函數

$("#form1").submit(function () {
    $('#form1').ajaxForm(function () {
        alert("提交成功2")
    })
})

但是雖然我看了很多博客都是這樣寫，我實際代碼運行之后發現，“提交成功2”并沒有打印，也就是函數沒有進去，

而且提交后，頁面會跳轉到action的地址，也就是說，這個方法不能實現表單的異步提交，只是為表單提交做準備，但傳入一個函數的方式不適合這個方法，因為沒有進去，不知道是不是我寫的有問題。但是如果傳入一個option是對象，就能生效。

var options = {
    url: "/day09/jqueryFormServlet", //提交地址：默認是form的action,如果申明,則會覆蓋
    type: "post",   //默認是form的method（get or post），如果申明，則會覆蓋
    beforeSubmit: beforeCheck, //提交前的回調函數
    success: successfun,  //提交成功后的回調函數
    target: "#output",  //把服務器返回的內容放入id為output的元素中
    dataType: "json", //html(默認), xml, script, json...接受服務端返回的類型
    clearForm: true,  //成功提交后，是否清除所有表單元素的值
    resetForm: true,  //成功提交后，是否重置所有表單元素的值
    timeout: 3000     //限制請求的時間，當請求大于3秒后，跳出請求
};

2：傳入一個js對象

$('#form1').ajaxForm(options)

ajaxSubmit（）方法：實現表單的異步提交

$("#form1").submit(function () {
    $('#form1').ajaxSubmit(function () {
        alert("提交成功2")
    })
    return false;
})

這里必須返回false，不然表單會提交兩次，因為異步提交一次，默認提交一次；

$('#form1').ajaxSubmit(options)

但如果傳入options對象則只會提交一次

“jquery form怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！