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 相关文章推荐
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
javascript相关事件的几个概念
May 21 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 Javascript
如何在Vue.JS中使用图标组件
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
改变Apache端口等配置修改方法
2008/06/05 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
javascript 数组排序函数
2009/08/20 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
Python 解析XML文件
2009/04/15 Python
java直接调用python脚本的例子
2014/02/16 Python
提升Python程序运行效率的6个方法
2015/03/31 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
详解Python3 基本数据类型
2019/04/19 Python
python装饰器常见使用方法分析
2019/06/26 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
《小石潭记》教学反思
2014/02/13 职场文书
决心书范文
2014/03/11 职场文书
个人担保书范文
2014/05/20 职场文书
任命书范本大全
2014/06/06 职场文书
2014教师研修学习体会
2014/07/08 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
大学生自荐书范文
2015/03/05 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python