angularjs $http实现form表单提交示例


Posted in Javascript onJune 09, 2017

需求:请求第三方后台接口返回一段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结果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
json传值以及ajax接收详解
May 24 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 Javascript
JavaScript设计模式之单例模式详解
Jun 09 #Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 #Javascript
JavaScript设计模式之策略模式详解
Jun 09 #Javascript
Bootstrap Table使用整理(三)
Jun 09 #Javascript
Bootstrap Table使用整理(二)
Jun 09 #Javascript
Bootstrap Table使用整理(一)
Jun 09 #Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 #Javascript
You might like
php若干单维数组遍历方法的比较
2011/09/20 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
jQuery Ajax之load()方法
2009/10/12 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
理解Python中的类与实例
2015/04/27 Python
解决Python传递中文参数的问题
2015/08/04 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
通过cmd进入python的实例操作
2019/06/26 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
主治医师岗位职责
2013/12/10 职场文书
经理秘书找工作求职信
2013/12/19 职场文书
房屋委托书范本
2014/04/04 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
学习退步检讨书
2014/09/28 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
Python OpenCV形态学运算示例详解
2022/04/07 Python
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python