浅谈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最佳实践之精妙的自定义事件
Aug 11 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
Preload基础使用方法详解
Feb 03 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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
给多个地址发邮件的类
2006/10/09 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
Python实现的knn算法示例
2018/06/14 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
查看keras的默认backend实现方式
2020/06/19 Python
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
委托书的写法
2014/09/16 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
python pyhs2 的安装操作
2021/04/07 Python
对PyTorch中inplace字段的全面理解
2021/05/22 Python
进行数据处理的6个 Python 代码块分享
2022/04/06 Python