首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

java 怎么异步(上传)提交表单 怎么异步跨域提交表单

2012-06-28 
java 如何异步(上传)提交表单 如何异步跨域提交表单1.使用post提交方式 2.构造表单的数格式 3.结合form表

java 如何异步(上传)提交表单 如何异步跨域提交表单
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>
按 Ctrl+C 复制代码

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

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}



function sj1()
{document.getElementById('f1').submit(); //提交表单

}
//创建iframe
window.onload= function()
{var iframe;
try {
  iframe = document.createElement('<iframe name="fileUploaderEmptyHole" style="hidden:true;"></iframe>');
} catch (ex) {
  iframe = document.createElement('iframe');

//document.getElementById('f1').target = 'fileUploaderEmptyHole';
iframe.id = 'fileUploaderEmptyHole';
iframe.name = 'fileUploaderEmptyHole';
document.body.appendChild(iframe);

}

<form id="f1" action="uploadSave.do" method="post"
enctype="multipart/form-data">
<input  type=file id="file" onchange="javascript: sj1();"  name="upload" >  

<inputtype="submit"  value="上传"  " id="btUpload" name="btUpload" />
</form>

热点排行
Bad Request.