需求:请求第三方后台接口返回一段 html 字符串如下,由前端去实现 form 表单的 POST 提交,
说明:form 表单 submit() 实现自动提交 input 标签 hidden,注意 script 代码中的 document.redirect.submit();
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- </head>
- <body>
- <form name="redirect" action="http://form_process.php" method="POST">
- <input type="hidden" name="aaa" value="aaa_value">
- <input type="hidden" name="bbb" value="bbb_value">
- </form>
- <script type="text/javascript">
- document.redirect.submit();
- </script>
- </body>
- </html>
为了执行上一段字符串 html 代码,用到了 iframe 标签 HTML5 的新属性 --srcdoc
HTML <iframe> 标签的 srcdoc 属性
- <iframe srcdoc="HTML_code">
example:
复制代码代码如下:问题来了
form 表单 submit() 提交后,不能知道表单提交完成的状态,因为从流程上考虑,需要判断表单提交成功、失败、网络无连接等状态,用 submit() 提交,获取不了这些状态。
解决步骤如下:
1、通过正则表达式提取表单中的 method、action、和 input 表单的 name、value 的值,得到
- var formData = {
- method: 'POST',
- url: 'http://form_process.php',
- data: {
- aaa: 'aaa_value',
- bbb: 'bbb_value'
- }
- }
2、发送 ajax 请求
- $http({
- method : formData.method,
- url :formData.url,
- data : $httpParamSerializerJQLike(formData.data), // pass in data as strings
- headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
- })
- .success(function(data) {
- console.log(data);//返回html字符串
- })
- .error(function(error) {
- console.log(error);
- });
有两个比较关键的地方:
1、$http 参数 data 的值需要用 $httpParamSerializerJQLike 处理
2、加上 headers : {'Content-Type': 'application/x-www-form-urlencoded'}
如果不做上面两个处理,请求也能成功 (状态返回: 200),只是不能在成功回调中拿到想要的 response 结果。
来源: http://www.jb51.net/article/115803.htm