您的位置：首页 > Web前端 > JQuery

基于jquery的实现异步跨域提交表单的实现代码，需要的朋友可以参考下。

2014-07-25 16:06 751 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航