首頁  >  文章  >  web前端  >  jquery form使用的方法是什麼

jquery form使用的方法是什麼

WBOY
WBOY原創
2022-06-07 15:24:102623瀏覽

在jquery中,可以利用ajaxForm()和ajaxSubmit()兩個方法來使用“jquery form”,“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影片教學#

以上是jquery form使用的方法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn