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 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
Div自动滚动到末尾的代码
Oct 26 Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
jquery ajax分页插件的简单实现
Jan 27 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
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禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
php中switch语句用法详解
2015/08/17 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
Python实现配置文件备份的方法
2015/07/30 Python
Python探索之pLSA实现代码
2017/10/25 Python
python实现Adapter模式实例代码
2018/02/09 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
Django app配置多个数据库代码实例
2019/12/17 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
优秀教师获奖感言
2014/01/31 职场文书
党员志愿者活动方案
2014/08/28 职场文书
统计员岗位职责范本
2015/04/14 职场文书
个人维稳承诺书
2015/05/04 职场文书
总结Python常用的魔法方法
2021/05/25 Python
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python