浅谈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 相关文章推荐
使用javascript做的一个随机点名程序
Feb 13 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
基于JavaScript 实现拖放功能
Sep 12 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
springboot+VUE实现登录注册
May 27 Vue.js
原生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
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
ParseInt函数参数设置介绍
2014/01/02 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
跟老齐学Python之print详解
2014/09/28 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
django实现支付宝支付实例讲解
2019/10/17 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
经理秘书求职自荐信范文
2014/03/23 职场文书
合伙协议书范本
2014/04/21 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
利用python做数据拟合详情
2021/11/17 Python
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby