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

时间：2010-11-17 来源：skykang

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>