你的位置:首页 > Java教程

[Java教程]异步跨域提交form表单


异步跨域提交form表单

  分两步提交页面用户输入的数据:第一步,利用form上传文件和一部分数据,第二步,上传文件成功得到文件id,再一次连同文件id和页面其他信息一同提交后台(也就是先上传一个文件,然后再利用文件id绑定到具体的“用户”上)。

  首先form应该这样写

  <form method="" action="" enctype="multipart/form-data" target="iframeName"></form>

  再创建一个隐藏的iframe在此就叫iframe1吧

  以上form中的属性都必须有,其中enctype是form上传文件是的格式,target的值就是隐藏iframe的name属性的值。直接submit就可以提交form表单,此时后台返回的数据会在这个隐藏的iframe1中,此时问题来了,文件上传成功后后台返回的文件id是在iframe1中的 ,然而iframe1和主页面是不同域下的所以就牵扯到了跨域问题。

  解决跨域问题的办法就是在首先写好一个中间页面tem.html,此中间页面就是完成文件和具体“用户”绑定操作(提交相关数据给后台)。将这个中间页面放在和iframe1同一个域下。

  tem.html中主要是 var body = parent.window.patchIframe.document.body; 来获得iframe1中的内容,具体写法视情况而定,此时就可以在tem.html中得到文件的id。

  用js动态生成一个隐藏的iframe2,并在iframe2中加载这个中间页面tem.html,请求tem.html时将需要和文件id绑定的“用户数据拼到url中”。这一步主要就是访问tem.html让他运行读取,此时tem.html中就可以得到具体“用户”的数据,也能得到文件id,然后直接发给指定的接口。执行的此其实异步提交form已经成功了,但是主页面是没有反应的,用户体验不好。

  最有一步就是iframe2和主页面之间的通信,告诉主页面操作成功。使用到的办法就是postMessage方法,详见http://www.cnblogs.com/dolphinX/p/3464056.html

  主页面得到数据就可以做用户友好的反馈。