詳解jquery中$.ajax方法提交表單

更新時(shí)間：2014年11月03日 14:19:19 投稿：hebedich

這篇文章主要介紹了jquery中$.ajax方法提交表單的方法及介紹，希望對(duì)大家有所幫助

function postdata(){                        //提交數(shù)據(jù)函數(shù)   

    $.ajax({                                //調(diào)用jquery的ajax方法   

        type: "POST",                       //設(shè)置ajax方法提交數(shù)據(jù)的形式   

        url: "ok.php",                      //把數(shù)據(jù)提交到ok.php   

        data: "writer="+$("#writer").val(), //輸入框writer中的值作為提交的數(shù)據(jù)   

        success: function(msg){             //提交成功后的回調(diào)，msg變量是ok.php輸出的內(nèi)容。   

            alert("數(shù)據(jù)提交成功");            //如果有必要，可以把msg變量的值顯示到某個(gè)DIV元素中   

        }   

    });   

}

jquery手冊(cè)描述:
data 發(fā)送到服務(wù)器的數(shù)據(jù)。將自動(dòng)轉(zhuǎn)換為請(qǐng)求字符串格式。GET 請(qǐng)求中將附加在 URL 后。查看 processData 選項(xiàng)說(shuō)明以禁止此自動(dòng)轉(zhuǎn)換。必須為 Key/Value 格式。如果為數(shù)組，jQuery 將自動(dòng)為不同值對(duì)應(yīng)同一個(gè)名稱。如 {foo:["bar1", "bar2"]} 轉(zhuǎn)換為 '&foo=bar1&foo=bar2'。
示例：

復(fù)制代碼代碼如下:

$.ajax({   

    type: "POST",   

    url: "some.php",   

    data: "name=John&location=Boston",   

    success: function(msg){   

        alert( "Data Saved: " + msg );   

    }   

});

這里data后面跟的參數(shù)可以用二種表式：一種是普通url傳參的寫(xiě)法一樣，還有一種就是寫(xiě)在json數(shù)組里，
上面示例data部分也可以這樣寫(xiě)：data: {name:"John",location:"Boston"}。這二個(gè)用法有什么區(qū)別？

今天在開(kāi)發(fā)中發(fā)現(xiàn)二者用法的細(xì)微差別。第一種我們用url傳參，參數(shù)里面如果加帶"&"這個(gè)符號(hào)的話，可能參數(shù)接收不到或不完整，如“ data: "name=John&location=Boston",”，

如果name的值是"john&smith"這樣寫(xiě)可能就會(huì)有問(wèn)題，我們可以用JS里面的encodeURIComponent()方法進(jìn)行轉(zhuǎn)義，

但如果用data: {name:"John",location:"Boston"}這種方式寫(xiě)的話就不需要進(jìn)行轉(zhuǎn)義，如果轉(zhuǎn)義的話，接收的將是轉(zhuǎn)義后的字符串

您可能感興趣的文章:

相關(guān)文章

jquery ui bootstrap 實(shí)現(xiàn)自定義風(fēng)格
本文主要是給大家分享了jQuery UI bootstrap的自定義風(fēng)格，以及自定義的方法，非常的實(shí)用，有需要的小伙伴千萬(wàn)不要錯(cuò)過(guò)
2014-11-11
jQuery取消特定的click事件
這篇文章主要介紹了jQuery取消特定的click事件實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了jQuery簡(jiǎn)單實(shí)現(xiàn)事件綁定及取消事件綁定的相關(guān)技巧,需要的朋友可以參考下
2016-02-02
jQuery實(shí)現(xiàn)數(shù)字華容道小游戲(實(shí)例代碼)
這篇文章主要介紹了jQuery實(shí)現(xiàn)數(shù)字華容道小游戲功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-01-01
jQuery實(shí)現(xiàn)單擊彈出Div層窗口效果(可關(guān)閉可拖動(dòng))
這篇文章主要介紹了jQuery實(shí)現(xiàn)單擊彈出Div層窗口效果,具有可關(guān)閉可拖動(dòng)的功能,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁(yè)面元素樣式的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
jQuery+jsp實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)效果(附源碼)
這篇文章主要介紹了jQuery+jsp實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)效果,以完整實(shí)例形式分析了jQuery結(jié)合jsp讀取MySQL數(shù)據(jù)庫(kù)操作實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)效果的相關(guān)技巧,并附帶完整實(shí)例源碼供讀者下載參考,需要的朋友可以參考下
2015-12-12
jquery選擇器和屬性對(duì)象的操作實(shí)例分析
這篇文章主要介紹了jquery選擇器和屬性對(duì)象的操作,結(jié)合實(shí)例形式分析了jquery選擇器與頁(yè)面元素屬性相關(guān)操作技巧,需要的朋友可以參考下
2020-01-01
BootStrap 標(biāo)題設(shè)置跨行無(wú)效的解決方法
這篇文章主要介紹了BootStrap 標(biāo)題設(shè)置跨行無(wú)效的解決方法,需要的朋友可以參考下
2017-10-10
jquery獲取及設(shè)置outerhtml的方法
這篇文章主要介紹了jquery獲取及設(shè)置outerhtml的方法,實(shí)例分析了jQuery實(shí)現(xiàn)針對(duì)outerhtml操作的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
easyUI下拉列表點(diǎn)擊事件使用方法
這篇文章主要為大家詳細(xì)介紹了easyUI下拉列表點(diǎn)擊事件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
jquery左邊浮動(dòng)到一定位置時(shí)顯示返回頂部按鈕
這篇文章主要介紹通過(guò)jquery實(shí)現(xiàn)左邊浮動(dòng)到一定位置時(shí)顯示返回頂部按鈕的效果,需要的朋友可以參考下
2014-06-06