angularjs $http实现form表单提交

<strong>
需求：请求第三方后台接口返回一段html字符串如下，由前端去实现form表单的POST提交，
说明：form表单submit()实现自动提交input标签hidden，注意script代码中的document.redirect.submit();
</strong>

<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 的新属性--<strong>srcdoc</strong>
<h2>HTML <iframe> 标签的 srcdoc 属性</h2>


<iframe srcdoc="HTML_code">

example：

<iframe srcdoc="<p>Hello world!</p><script>alert(123);</script>" src="demo_iframe_srcdoc.htm"></iframe>

<strong>问题来了</strong>
form表单submit()提交后，不能知道表单提交完成的状态，因为从流程上考虑，需要判断表单提交成功、失败、网络无连接等状态，用submit()提交，获取不了这些状态。
解决步骤如下：
1、通过<b>正则表达式</b>提取表单中的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':  } // 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);
});

全部频道

angularjs $http实现form表单提交