浅谈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实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
浅析JavaScript中的typeof运算符
Nov 30 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
JS实现拖动模糊框特效
Aug 25 Javascript
如何用JavaScript学习算法复杂度
Apr 30 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
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
PHP可变函数学习小结
2015/11/29 PHP
网页javascript精华代码集
2007/01/24 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
vue中轮训器的使用
2019/01/27 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
python两种遍历字典(dict)的方法比较
2014/05/29 Python
python Django框架实现自定义表单提交
2016/03/25 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
Python简单实现控制电脑的方法
2018/01/22 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
什么是数组名
2012/05/10 面试题
失业者真诚求职信范文
2013/12/25 职场文书
食堂个人先进事迹
2014/01/22 职场文书
买房协议书
2014/04/11 职场文书
计算机软件专业求职信
2014/06/10 职场文书
党员先进事迹材料
2014/12/19 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
中国合伙人观后感
2015/06/02 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
mysql创建存储过程及函数详解
2021/12/04 MySQL