jquery下異步提交表單異步跨域提交表單

2019-11-21 00:08:04

字體：大中小

來源：轉載

供稿：網友

1.使用post提交方式
2.構造表單的數格式
3.結合form表單的submit調用ajax的回調函數。
使用 jQuery 異步提交表單代碼：

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>無標題頁</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 的跨域訪問特性，結合form表單的數據格式化，所以只能采用get方式提交,為了安全，瀏覽器是不支持post跨域提交的。
2.采用JSONP跨域提交表單是比較好的解決方案。
3.也可以動態程序做一代理。用代理中轉跨域請求。
使用 jQuery 異步跨域提交表單代碼：

復制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>無標題頁</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> 