jquery下異步提交表單 異步跨域提交表單
更新時(shí)間：2010年11月17日 14:09:31 作者：
基于jquery的實(shí)現(xiàn)異步跨域提交表單的實(shí)現(xiàn)代碼，需要的朋友可以參考下。
1.使用post提交方式
2.構(gòu)造表單的數(shù)格式
3.結(jié)合form表單的submit調(diào)用ajax的回調(diào)函數(shù)。
使用 jQuery 異步提交表單代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無(wú)標(biāo)題頁(yè)</title>
</head>
<script src="js/jquery-1.4.2.js"></script>
<script>
jQuery(function($) {
// 使用 jQuery 異步提交表單
$('#f1').submit(function() {
$.ajax({
url: 'ta.aspx',
data: $('#f1').serialize(),
type: "post",
cache : false,
success: function(data)
{alert(data);}
});
return false;
});
});
</script>
<body>
<form id="f1" name="f1">
<input name="a1" />
<input name="a2" />
<input id="File1" type="file" name="File1"/>
<input id="Submit1" type="submit" value="submit" />
</form>
</body>
</html>
如何異步跨域提交表單呢?
1.利用script 的跨域訪問(wèn)特性，結(jié)合form表單的數(shù)據(jù)格式化，所以只能采用get方式提交,為了安全，瀏覽器是不支持post跨域提交的。
2.采用JSONP跨域提交表單是比較好的解決方案。
3.也可以動(dòng)態(tài)程序做一代理。用代理中轉(zhuǎn)跨域請(qǐng)求。
使用 jQuery 異步跨域提交表單代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無(wú)標(biāo)題頁(yè)</title>
</head>
<script src="js/jquery-1.4.2.js"></script>
<script>
jQuery(function($)
{
// 使用 jQuery 異步跨域提交表單
$('#f1').submit(function()
{
$.getJSON("ta.aspx?"+$('#f1').serialize()+"&jsoncallback=?",
function(data)
{
alert(data);
});
return false;
});
});
</script>
<body>
<form id="f1" name="f1">
<input name="a1" />
<input name="a2" />
<input id="File1" type="file" name="File1"/>
<input id="Submit1" type="submit" value="submit" />
</form>
</body>
</html>
2.構(gòu)造表單的數(shù)格式
3.結(jié)合form表單的submit調(diào)用ajax的回調(diào)函數(shù)。
使用 jQuery 異步提交表單代碼：
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無(wú)標(biāo)題頁(yè)</title>
</head>
<script src="js/jquery-1.4.2.js"></script>
<script>
jQuery(function($) {
// 使用 jQuery 異步提交表單
$('#f1').submit(function() {
$.ajax({
url: 'ta.aspx',
data: $('#f1').serialize(),
type: "post",
cache : false,
success: function(data)
{alert(data);}
});
return false;
});
});
</script>
<body>
<form id="f1" name="f1">
<input name="a1" />
<input name="a2" />
<input id="File1" type="file" name="File1"/>
<input id="Submit1" type="submit" value="submit" />
</form>
</body>
</html>
如何異步跨域提交表單呢?
1.利用script 的跨域訪問(wèn)特性，結(jié)合form表單的數(shù)據(jù)格式化，所以只能采用get方式提交,為了安全，瀏覽器是不支持post跨域提交的。
2.采用JSONP跨域提交表單是比較好的解決方案。
3.也可以動(dòng)態(tài)程序做一代理。用代理中轉(zhuǎn)跨域請(qǐng)求。
使用 jQuery 異步跨域提交表單代碼：
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無(wú)標(biāo)題頁(yè)</title>
</head>
<script src="js/jquery-1.4.2.js"></script>
<script>
jQuery(function($)
{
// 使用 jQuery 異步跨域提交表單
$('#f1').submit(function()
{
$.getJSON("ta.aspx?"+$('#f1').serialize()+"&jsoncallback=?",
function(data)
{
alert(data);
});
return false;
});
});
</script>
<body>
<form id="f1" name="f1">
<input name="a1" />
<input name="a2" />
<input id="File1" type="file" name="File1"/>
<input id="Submit1" type="submit" value="submit" />
</form>
</body>
</html>
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了jQuery表單驗(yàn)證之密碼確認(rèn)的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
jquery實(shí)現(xiàn)跳到底部，回到頂部效果的簡(jiǎn)單實(shí)例(類似錨)
下面小編就為大家?guī)?lái)一篇jquery實(shí)現(xiàn)跳到底部，回到頂部效果的簡(jiǎn)單實(shí)例(類似錨)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
基于?jquery-cxselect?實(shí)現(xiàn)下拉聯(lián)動(dòng)效果功能實(shí)現(xiàn)
這篇文章主要介紹了基于?jquery-cxselect?實(shí)現(xiàn)下拉聯(lián)動(dòng)效果,下拉聯(lián)動(dòng)是基于query的一款聯(lián)動(dòng)下拉菜單插件 jquery-cxselect實(shí)現(xiàn)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-02-02
在Jquery中，$是JQuery的別名，所有使用$的地方也都可以使用JQuery來(lái)替換,下面為大家介紹下如何解決jquery中美元符號(hào)命名沖突問(wèn)題2014-01-01
jQuery div層的放大與縮小簡(jiǎn)單實(shí)現(xiàn)代碼
div層的放大與縮小想必大家已不是那么陌生了吧，接下來(lái)為大家詳細(xì)介紹下使用jQuery實(shí)現(xiàn)，感興趣的各位可以參考下哈，希望可以幫助到你2013-03-03
這篇文章介紹了jQuery中的CSS-DOM操作，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
jQuery中的一些常見(jiàn)方法小結(jié)(推薦)
下面小編就為大家?guī)?lái)一篇jQuery中的一些常見(jiàn)方法小結(jié)(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
HTML5+jQuery插件Quicksand實(shí)現(xiàn)超酷的星際爭(zhēng)霸2兵種分類展示效果(附demo源碼下載)
這篇文章主要介紹了HTML5+jQuery插件Quicksand實(shí)現(xiàn)超酷的星際爭(zhēng)霸2兵種分類展示效果,詳細(xì)分析了Quicksand插件的使用及圖片浮動(dòng)顯示的實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細(xì)介紹了jQuery超精致圖片輪播幻燈片特效，圖片輪播效果特別適合做產(chǎn)品展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-09-09
jquery實(shí)現(xiàn)通用版鼠標(biāo)經(jīng)過(guò)淡入淡出效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的通用版鼠標(biāo)經(jīng)過(guò)淡入淡出效果,需要的朋友可以參考下2014-06-06