jquery用ajax提交表單

2021-09-12 14:14:29 字數 2059 閱讀 3656

jquery ajax三種方式非同步提交表單

一、使用html5 formdata物件的方式ajax非同步提交資料和檔案:

注意**jquery ajax的必須傳引數processdata: false,contenttype: false,否則會報錯:

>

<

/script>

="ajax_form"

>

"text" name=

"str" value=

"aiezu.com"

/>

"text" name=

"num" value=

"123456"

/>

"file" name=

"image"

/>

"button"

class

="btn_submit"

>提交<

/button>

<

/form>

$(function()

, error:

function

(xhr, textstatus, errorthrown)})

})})

<

/script>

優點:簡單好用,能直接ajax非同步提交資料和檔案;

缺點:部分瀏覽器支援不夠好,如ie 10一下版本不支援;

二、使用jquery serialize()函式構建資料或者手動構建資料物件方式:

本方式建議在只非同步提交基本資料,不需要非同步上傳檔案的情況下使用:

>

<

/script>

="ajax_form"

>

"text" name=

"str" value=

"aiezu.com"

/>

"text" name=

"num" value=

"123456"

/>

"file" name=

"image"

/>

"button"

class

="btn_submit"

>提交<

/button>

<

/form>

$(function()

; $.

ajax(,

error:

function

(xhr, textstatus, errorthrown)})

})})

<

/script>

優點:簡單好用,幾乎相容所有瀏覽器;

缺點:無法ajax非同步上傳檔案,只能非同步提交基本資料;

三、使用jquery from外掛程式來ajax非同步提交資料和檔案:

>

<

/script>

"">

<

/script>

="ajax_form"

>

"text" name=

"str" value=

"aiezu.com"

/>

"text" name=

"num" value=

"123456"

/>

"file" name=

"image"

/>

"button"

class

="btn_submit"

>提交<

/button>

<

/form>

$(function()

, error:

function

(xhr, textstatus, errorthrown)}$

(".ajax_form").

ajaxsubmit

(params);}

)})<

/script>

用ajax提交表單

用ajax提交表單,後台方法處理沒有報錯,但是卻走了ajax的error 在谷歌控制台輸入這段 執行,發現去請求了頁面,報了404 明明是去請求後台方法的,怎麼去請求頁面了呢?原因 因為後台controller方法沒有加 responsebody所以走到了檢視處理器,加上之後會將controller...

jquery的ajax提交form表單

ajax提交整個表單,可以分為2種,無返回值 即表單提交到後台,後台處理完就處理完了 有返回值 後台給出成功和失敗的返回,即是ajax中success方法 1 無返回值 formid submit 直接提交到後台,目前還沒實踐 2 有返回值 serialize 方法通過序列化表單值,建立url編碼文...

JQUERY的表單非同步提交(ajax)

document ready function error function request success function data return false 關鍵點 myform serialize serialize 方法通過序列化表單值,建立 url 編碼文字字串。注意點 當非同步提交獲取...