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 弹出框口并返回值的两种常用方法
Dec 30 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
javascript实现倒计时关闭广告
Feb 09 Javascript
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
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
ftp类(example.php)
2006/10/09 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
Python格式化css文件的方法
2015/03/10 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
银河香水:Galaxy Perfume
2019/03/25 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
教职工代表大会主持词
2014/04/01 职场文书
开学随笔
2015/08/15 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang