浅谈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 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 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面向对象编程快速入门
2006/12/14 PHP
mysql 字段类型说明
2007/04/27 PHP
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
领导失职检讨书
2014/02/24 职场文书
英语故事演讲稿
2014/04/29 职场文书
五心教育心得体会
2014/09/04 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
vue项目支付功能代码详解
2022/02/18 Vue.js