angularjs $http实现form表单提交示例
需求：请求第三方后台接口返回一段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：
<iframe srcdoc="<p>Hello world!</p><script>alert(123);</script>" src="demo_iframe_srcdoc.htm"></iframe>
问题来了
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结果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍angularJS提交表单（form），包括了angularJS提交表单（form）的使用技巧和注意事项，需要的朋友参考一下 代码很简单，就不多废话了，直接奉上代码： 这里给大家分享的是最基础的angularJS表单验证，希望大家能够喜欢。
-
本文向大家介绍EasyUI中实现form表单提交的示例分享，包括了EasyUI中实现form表单提交的示例分享的使用技巧和注意事项，需要的朋友参考一下 以上就是本文的全部内容了，希望对大家能够有所帮助。
-
本文向大家介绍Form表单按回车自动提交表单的实现方法，包括了Form表单按回车自动提交表单的实现方法的使用技巧和注意事项，需要的朋友参考一下 1.form表单中只有一个input标签,按回车键将自动提交表单 当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交。 如果不想让其自动提交可以这样做: 再添加一个<input type=
-
本文向大家介绍js 提交form表单和设置form表单请求路径的实现方法，包括了js 提交form表单和设置form表单请求路径的实现方法的使用技巧和注意事项，需要的朋友参考一下 如下所示： 以上就是小编为大家带来的js 提交form表单和设置form表单请求路径的实现方法全部内容了，希望大家多多支持呐喊教程~
-
描述 (Description) Framework7允许您使用以下两种方式使用Ajax自动发送数据 - 当用户提交表单或submit事件时，以编程方式触发表单。 当用户修改任何表单字段或以编程方式change表单上触发的事件时。 发送提交表单数据 要自动启用Ajax表单并单击“提交”发送表单数据，您需要将ajax-submit类添加到表单中。 用户提交表单后，Ajax将使用以下规则自动发送表单数
-
本文向大家介绍将form表单通过ajax实现无刷新提交的简单实例，包括了将form表单通过ajax实现无刷新提交的简单实例的使用技巧和注意事项，需要的朋友参考一下 实例如下： 以上就是小编为大家带来的将form表单通过ajax实现无刷新提交的简单实例全部内容了，希望大家多多支持呐喊教程~