window.open以post方式提交
2012-11-04 23:34
309 查看
第一种方式
在web项目中,碰到需要跨页面传递参数的功能,就是那种需要把当前页面的内容带到新开的子窗体中,以前的做法是传一个id过去,然后在新窗口中去读数据库的内容。虽然不怎么麻烦,但是如果内容么有在数据库里保存,仅仅是处以拟稿状态时,就不能实现了,用户还常常认为是个bug。考虑采用get的方式传递,把需要的内容都序列化然后,通过url去传,显得很臃肿,而且get的传递内容长度有限制。于是就想到用post的方式传递,问题在于open方法不能设置请求方式,一般网页的post都是通过form来实现的。如果仅仅模拟form的提交方式,那么open方法里那种可设置窗体属性的参数又不能用。最后想办法整了这么一个两者结合的方式,将form的target设置成和open的name参数一样的值,通过浏览器自动识别实现了将内容post到新窗口中。
比较有意思的是直接通过调用form的submit方法不能触发onsubmit事件,查看了帮助文档,必须手动的触发,否则只能看到页面刷新而没有打开新窗口。代码中只传递了一个参数内容,实际可传递多个。
具体代码如下:
代码
第二种方式
代码
推荐使用第一种方式,第二种方式测试过程中发现,与日历弹出框冲突,如果子页面上有日历弹出框,则点日历框会不停刷新页面,不会弹出日历框。当然,也可能是我用的日历框的问题。
转载地址:/article/3839985.html
在web项目中,碰到需要跨页面传递参数的功能,就是那种需要把当前页面的内容带到新开的子窗体中,以前的做法是传一个id过去,然后在新窗口中去读数据库的内容。虽然不怎么麻烦,但是如果内容么有在数据库里保存,仅仅是处以拟稿状态时,就不能实现了,用户还常常认为是个bug。考虑采用get的方式传递,把需要的内容都序列化然后,通过url去传,显得很臃肿,而且get的传递内容长度有限制。于是就想到用post的方式传递,问题在于open方法不能设置请求方式,一般网页的post都是通过form来实现的。如果仅仅模拟form的提交方式,那么open方法里那种可设置窗体属性的参数又不能用。最后想办法整了这么一个两者结合的方式,将form的target设置成和open的name参数一样的值,通过浏览器自动识别实现了将内容post到新窗口中。
比较有意思的是直接通过调用form的submit方法不能触发onsubmit事件,查看了帮助文档,必须手动的触发,否则只能看到页面刷新而没有打开新窗口。代码中只传递了一个参数内容,实际可传递多个。
具体代码如下:
代码
function openPostWindow(url, data, name) { var tempForm = document.createElement("form"); tempForm.id="tempForm1"; tempForm.method="post"; tempForm.action=url; tempForm.target=name; var hideInput = document.createElement("input"); hideInput.type="hidden"; hideInput.name= "content" hideInput.value= data; tempForm.appendChild(hideInput); tempForm.attachEvent("onsubmit",function(){ openWindow(name); }); document.body.appendChild(tempForm); tempForm.fireEvent("onsubmit"); tempForm.submit(); document.body.removeChild(tempForm); } function openWindow(name) { window.open('about:blank',name,'height=400, width=400, top=0, left=0, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes'); }
第二种方式
代码
function openWindowWithPost(url,name,keys,values) { var newWindow = window.open(url, name); if (!newWindow) return false; var html = ""; html += "<html><head></head><body><form id='formid' method='post' action='" + url + "'>"; if (keys && values) { html += "<input type='hidden' name='" + keys + "' value='" + values + "'/>"; } html += "</form><script type='text/javascript'>document.getElementById('formid').submit();"; html += "<\/script></body></html>".toString().replace(/^.+?\*|\\(?=\/)|\*.+?$/gi, ""); newWindow.document.write(html); return newWindow; }
推荐使用第一种方式,第二种方式测试过程中发现,与日历弹出框冲突,如果子页面上有日历弹出框,则点日历框会不停刷新页面,不会弹出日历框。当然,也可能是我用的日历框的问题。
转载地址:/article/3839985.html
相关文章推荐
- window.open用post方式提交
- window.open 用post方式提交
- window.open以post方式提交
- window.open (参数使用post方式提交)
- window.open (参数使用post方式提交)
- get和post方式的提交过程图(补充)(jquery的post 、get for的get post 、链接的get、window.open)
- window.open() POST 方式提交json数据,以及后台的json序列化为对象
- window.open()时以post方式提交数据
- window.open()的用法及如何以post方式提交
- window.open以post方式提交
- window.open以post方式提交
- window.open以post方式提交
- 关于XMLHttpRequest.open()设置提交方式 (POST,GET)
- 让一个表单以post的方式在window.open的窗口中打开
- 使用window.open打开新窗口,以post方式传参数
- js 用 window.open()方法跳转到新页面并且用post方式传参
- 前端提交数据/访问后端的几种方式:Ajax,form,触发,window.open()
- 利用window.open实现post方式的参数传递