浅谈angularjs $http提交数据探索


Posted in Javascript onJanuary 20, 2017

前两天在搞自己的项目,前端js框架用的是angularjs框架;网站整的差不多的时候出事了;那就是当我用$http.post()方法向服务器提交一些数据的时候;后台总是接收不到数据;

于是采用了其他方法暂时性替代一下;

今天正好有时间研究这个事情;网上查了很多资料;都试了试;都是不太好;但是还是给我提供了一些解决问题的思路;

正文开始:首先做了个demo如下;主要是为了比较他们的不同之处;

浅谈angularjs $http提交数据探索

html如下:

<div class="container-fluid" data-ng-app="jjd" data-ng-controller="index">

 <div class="container">

  <div class="row">

    

   <div class="col-md-5">

    <p class="h4 text-center">jQ的$.post()提交</p>

    <p> </p>

    <div class="form-group">

     <label for="exampleInputEmail1">用户名</label>

     <input type="text" ng-model="sdata.name" class="form-control" placeholder="用户名">

    </div>

    <div class="form-group">

     <label for="">密码</label>

     <input type="password" ng-model="sdata.pwd" class="form-control" placeholder="密码">

    </div>

    <button type="button" class="btn btn-primary btn-block" ng-click="jPostData()">jQ提交</button>

   </div>

   <div class="col-md-2"> </div>

   <div class="col-md-5">

    <p class="h4 text-center">angularjs的$http.post()功能</p>

    <p> </p>

    <div class="form-group">

     <label for="exampleInputEmail1">用户名</label>

     <input type="text" ng-model="sdata2.name" class="form-control" placeholder="用户名">

    </div>

    <div class="form-group">

     <label for="">密码</label>

     <input type="password" ng-model="sdata2.pwd" class="form-control" placeholder="密码">

    </div>

    <button type="button" class="btn btn-primary btn-block" ng-click="aPostData()">$http提交</button>

   </div>

    

  </div>

 </div>

</div>

js代码如下:

var app = angular.module('jjd',[]);
app.controller('index',function($scope,$http){
 $scope.sdata = {
  name:'jQuery',
  pwd:'jQuery'
 };
 $scope.sdata2 = {
  name:'Angularjs',
  pwd:'Angularjs'
 };
 
 /*jQ的ajax提交*/
 $scope.jPostData = function(){
  //console.log($scope.sdata);
  $.post('/web/data.php',$scope.sdata,function(d){
   console.log(d);
  })
 };
 
 /*angularjs的$http提交*/
 $scope.aPostData = function(){
  
  $http({
   url: '/web/data.php',
   method: 'POST',
   data:$scope.sdata2
   }
  }).success(function(da){
   console.log(da);
  });
 };
});

后台采用php的$_POST接收:

<?php
header("Content-type: text/html; charset=utf-8"); 
$aname = $_POST['name'];
$apwd = $_POST['pwd'];

$msg = array();
$msg['name'] = $aname;
$msg['pwd'] = $apwd;
echo json_encode($msg);
?>

服务器采用wampsever的本地启动的本地服务器。致此,页面服务搭建完毕;开始测试;

结果如图:

浅谈angularjs $http提交数据探索

从上图的对比中可以看出后台接收不到值得原因主要是1、2、3处不同;

其中1和2是请求的头文件信息;

3是数据类型不同;jq发送的是Form Data;而angularjs默认发送的是json数据;

产生原因已经找到;下面开始改造;

首先针对1和2,在$http()的方法中配置header信息;

其次对数据进行转换;这里我做了个简单的json到string转换的服务;

改造后的代码如下:

/*------创建angularjs应用------*/
var app = angular.module('jjd',[]);

/*创建json格式到string的转换服务*/
app.service('jsonToStr',function(){
 this.transform = function(jsonData){
  var string = '';
  
  for(str in jsonData){
   string = string + str +'=' + jsonData[str] +'&';
  }
  
  var _last = string.lastIndexOf('&');
  
  string = string.substring(0,_last);
  
  return string;
 };
});

/*---------首页控制器--------*/
app.controller('index',function($scope,$http,jsonToStr){//注入创建的jsonToStr服务
 $scope.sdata = {
  name:'jQuery',
  pwd:'jQuery'
 };
 $scope.sdata2 = {
  name:'Angularjs',
  pwd:'Angularjs'
 };
 
 /*jQ的ajax提交*/
 $scope.jPostData = function(){
  //console.log($scope.sdata);
  $.post('/web/data.php',$scope.sdata,function(d){
   console.log(d);
  })
 };
 
 /*angularjs的$http提交*/
 $scope.aPostData = function(){
  //console.log(jsonToStr.transform($scope.sdata2));
  
  $http({
   url: '/web/data.php',
   method: 'POST',
   data:$scope.sdata2,
   data: jsonToStr.transform($scope.sdata2),//对提交的数据格式化
   headers: {
    'Accept': '*/*',
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
   }
  }).success(function(da){
   console.log(da);
  });
 };
});

致此,angularjs提交数据后台接收不到的问题解决(只针对json数据格式);献给奋斗中的小伙伴;

这个问题应该还有一种思路;就是在服务端进行对获取json格式的数据的支持,有兴趣的小伙伴可以尝试一下;

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

Javascript 相关文章推荐
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
js style动态设置table高度
Oct 21 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
jQuery选择器源码解读(七):elementMatcher函数
Mar 31 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
vue实现下拉菜单树
Oct 22 Javascript
原生js实现无限循环轮播图效果
Jan 20 #Javascript
原生js实现弹出层效果
Jan 20 #Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 #Javascript
原生js实现图片放大缩小计时器效果
Jan 20 #Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 #Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 #Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 #Javascript
You might like
php5 and xml示例
2006/11/22 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
javascript编写简易计算器
2017/05/06 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
layui 弹出删除确认界面的实例
2019/09/06 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
python 中字典嵌套列表的方法
2018/07/03 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
python logging模块的使用
2020/09/07 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
大学自荐信
2013/12/12 职场文书
银行服务感言
2014/03/01 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书