如何异步提交表单 如何异步跨域提交表单

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>

补充:方法1不能实现跨越提交。

注意:输出json格式{'a1','a1value','a2':'a2value'}

字符必须用引号包住,数字可以不加引号。如:{'a1',10,'a2':20}

posted @ 2010-11-17 13:21  skykang  阅读(3550)  评论(1编辑  收藏