AngularJS与后端php的数据交互方法


Posted in Javascript onAugust 13, 2018

简述:

AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

它不仅仅是一个类库,而是提供了一个完整的框架。它避免了您和多个类库交互,需要熟悉多套接口的繁琐工作。它由Google Chrome的开发人员设计,引领着下一代Web应用开发。也许我们5年或10年后不会使用AngularJS,但是它的设计精髓将会一直被沿用。

问题及方案:

既然是前端框架,就免不了与后台的数据交互。本文讲解与PHP数据交互中的重点。

AngularJS的$http不管你使用的是POST还是PUT,默认的发送和请求数据格式都是json的,这个我们可以从它发送的http请求头中看到:Content-Type:application/json;charset=UTF-8。而PHP的GET或者POST接收的http请求数据却是:Content-Type:application/x-www-form-urlencoded;charset=UTF-8。

所以新手在使用AngularJS时候都会遇到这个问题,明明发送过来了,为什么我收不到数据?解决这个问题我们可以从两个方面入手:

一、在PHP中

<?php
$data = file_get_contents("php://input");
echo $data;

这样你会发现。$data是一个json数据,之后PHP中你便可以对这个数据做其他处理了。

二、Angular中重构http请求

var ws = angular.module("app",[function ($httpProvider) {
 $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";
 $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
 var param = function (obj) {
 var query = "", name, value, fullSubName, subName, subValue, innerObj, i;
 for (name in obj) {
  value = obj[name];
  if (value instanceof Array) {
  for (i = 0; i < value.length; ++i) {
   subValue = value[i];
   fullSubName = name + "[" + i + "]";
   innerObj = {};
   innerObj[fullSubName] = subValue;
   query += param(innerObj) + "&";
  }
  } else if (value instanceof Object) {
  for (subName in value) {
   subValue = value[subName];
   fullSubName = name + "[" + subName + "]";
   innerObj = {};
   innerObj[fullSubName] = subValue;
   query += param(innerObj) + "&";
  }
  } else if (value !== undefined && value !== null) {
  query += encodeURIComponent(name) + "=" + encodeURIComponent(value) + "&";
  }
 }
 return query.length ? query.substr(0, query.length - 1) : query;
 };
 $httpProvider.defaults.transformRequest = [function (data) {
 return angular.isObject(data) && String(data) !== "[object File]" ? param(data) : data;
 }];
}]);

在构建app时直接重写$http,将其转化为我们常用的请求方式。这样之后就像普通的ajax请求一般了。

以上这篇AngularJS与后端php的数据交互方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
jQuery中extend函数详解
Feb 13 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
使用canvas及js简单生成验证码方法
Apr 02 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 Javascript
用vue设计一个日历表
Dec 03 Vue.js
Vue Promise的axios请求封装详解
Aug 13 #Javascript
Angular6封装http请求的步骤详解
Aug 13 #Javascript
解决angularjs中同步执行http请求的方法
Aug 13 #Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 #Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 #Javascript
angularjs $http调用接口的方式详解
Aug 13 #Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 #Javascript
You might like
php PDO中文乱码解决办法
2009/07/20 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
Python中random模块生成随机数详解
2016/03/10 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
python+flask实现API的方法
2018/11/21 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
Python向excel中写入数据的方法
2019/05/05 Python
pow在python中的含义及用法
2019/07/11 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
工商管理应届生求职信
2013/10/07 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
统计系教授推荐信
2014/02/28 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
2016年十一促销广告语
2016/01/28 职场文书
Mysql事务索引知识汇总
2022/03/17 MySQL
MySQL导致索引失效的几种情况
2022/06/25 MySQL