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 相关文章推荐
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
JavaScript中的细节分析
Jun 30 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
vue实现购物车小案例
Sep 27 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
php计算整个目录大小的方法
2015/06/01 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
Python同时迭代多个序列的方法
2020/07/28 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
房产代理公证处委托书
2014/04/04 职场文书
开学典礼演讲稿
2014/05/23 职场文书
任命书模板
2014/06/04 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
《月光曲》教学反思
2016/02/16 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
Python快速实现一键抠图功能的全过程
2021/06/29 Python
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android