[转载 jquery post 跨域 提交数据
2011-06-28 11:10
跨域的N种形式：
1.直接用jquery中$.getJSON进行跨域提交
优点：有返回值,可直接跨域；
缺点：数据量小；
提交方式：仅get (无$.postJSON)
2.在页面中嵌入一个iframe，把iframe的宽和高设置为0进行跨域提交
优点：可直接跨域；
缺点：无返回值(脱离ajax本质)；
提交方式：get/post
3.直接用$.post跨域，先提交到本地域名下一个代理程序，通过代理程序向目的域名进行post或get提交，并根据目的域名的返回值通过代理 程序返回给本地页面
优点：有返回值，可直接跨域，可通过 代理程序 统计ip等用户信息，增加安全性；
提交方式：get/post
复杂度：需要前端工程师和后端工程师配合(php/java../工程师)
缺点：需要消耗本地服务器资源，增加ajax等待时间（可忽略）
4.向百度学习的思路：由于调用任何js文件不涉及跨域问题,所以js脚本中可以编写调用远程服务器上的js文件,该文件实现你需要的业务。
即a.js动态调用www.baidu.com/b.js ,其中b.js实现业务
5.待研究......
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.也可以动态程序做一代理。用代理中转跨域请求。
代码：
<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>
补充：方法1不能实现跨越提交。
注意：输出json格式{'a1','a1value','a2':'a2value'}
字符必须用引号包住，数字可以不加引号。如：{'a1',10,'a2':20}
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。
