您的位置：首页 > 编程技术 > js  >  angularjs $http实现form表单提交示例

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

 更新时间：2017年6月15日 10:00  点击：2940

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

[!--infotagslink--]

相关文章

  • JS中artdialog弹出框控件之提交表单思路详解

    artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口。本文给大家介绍JS中artdialog弹出框控件之提交表单思路详解，对本文感兴趣的朋友一起学习吧...2016-04-19

  • 浅析AngularJS Filter用法

    系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解，感兴趣的朋友一起学习吧...2015-12-29

  • AngularJS 实现按需异步加载实例代码

    AngularJS 通过路由支持多视图应用， 可以根据路由动态加载所需的视图， 在 AngularJS 的文档中有详细的介绍， 网上也有不少教程， 就不用介绍了！随着视图的不断增加，js文件会越来越多，而 AngularJS 默认需要把全部的js都一次性...2015-10-21

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

    这篇文章主要介绍了angularjs $http实现form表单提交示例，非常具有实用价值，需要的朋友可以参考下 ...2017-06-15

  • AngularJS自定义指令之复制指令实现方法

    这篇文章主要介绍了AngularJS自定义指令之复制指令实现方法,结合完整实例形式分析了AngularJS自定义指令实现复制功能的相关操作技巧,需要的朋友可以参考下...2017-05-22

  • AngularJS实现Model缓存的方式

    这篇文章主要介绍了AngularJS实现Model缓存的方式，分享了多种AngularJS实现Model缓存的方法，感兴趣的小伙伴们可以参考一下...2016-02-05

  • AngularJS实现分页显示数据库信息

    这篇文章主要为大家详细介绍了AngularJS实现分页显示数据库信息效果的相关资料，感兴趣的小伙伴们可以参考一下...2016-07-06

  • jquery表单插件form使用方法详解

    这篇文章主要为大家详细介绍了jquery插表单件form使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-23

  • AngularJS 视图详解及示例代码

    本文主要介绍AngularJS 视图，这里整理了相关知识，并附代码示例和实现效果图，有兴趣的小伙伴可以参考下...2016-08-27

  • AngularJS 依赖注入详解及示例代码

    本文主要介绍AngularJS 依赖注入的知识，这里整理了相关的基础知识，并附示例代码和实现效果图，有兴趣的小伙伴可以参考下...2016-08-24

  • AngularJs中route的使用方法和配置

    angular是Google开发的一个单页面应用框架,是现在比较主流的单页面应用框架之一，下面通过本文给大家介绍AngularJs中route的使用方法和配置，感兴趣的朋友一起学习吧...2016-02-09

  • 浅谈AngularJs指令之scope属性详解

    下面小编就为大家带来一篇浅谈AngularJs指令之scope属性详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25

  • 快速学习AngularJs HTTP响应拦截器

    任何时候，如果我们想要为请求添加全局功能，例如身份认证、错误处理等，在请求发送给服务器之前或服务器返回时对其进行拦截，是比较好的实现手段...2016-01-05

  • AngularJS内建服务$location及其功能详解

    这篇文章主要为大家详细介绍了AngularJS内建服务$location及$location功能，感兴趣的小伙伴们可以参考一下...2016-07-06

  • Angular实现form自动布局

    这篇文章主要介绍了Angular实现form自动布局的相关资料，以代码片段的形式分析了Angular实现form自动布局的实现方法，感兴趣的小伙伴们可以参考一下...2016-02-01

  • Angularjs中如何使用filterFilter函数过滤

    这篇文章主要介绍了Angularjs中如何使用filterFilter函数过滤的相关资料,需要的朋友可以参考下...2016-02-12

  • angularjs循环对象属性实现动态列的思路详解

    这篇文章主要介绍了angularjs循环对象属性实现动态列的思路详解,本文给大家分享一个demo代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-11-02

  • AngularJS使用ngOption实现下拉列表的实例代码

    这篇文章主要介绍了AngularJS使用ngOption实现下拉列表的实例代码的相关资料,需要的朋友可以参考下...2016-01-25

  • AngularJS 让人爱不释手的八种功能

    AngularJS 让人爱不释手的八种功能，想知道AngularJS哪八种功能让人喜欢就快点看下本文吧...2016-03-28

  • angularJS 指令封装回到顶部示例详解

    本篇文章主要介绍了angularJS 指令封装回到顶部示例详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ...2017-01-26