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 相关文章推荐
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 Javascript
Element MessageBox弹框的具体使用
Jul 27 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
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
PHP类型约束用法示例
2016/09/28 PHP
Git命令之分支详解
2021/03/02 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
python实现简单成绩录入系统
2019/09/19 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
abstract class和interface有什么区别
2013/08/04 面试题
2013年高中生自我评价
2013/10/23 职场文书
个性与发展自我评价
2014/02/11 职场文书
开服装店计划书
2014/08/15 职场文书
小学生暑假生活总结
2015/07/13 职场文书
学校少先队工作总结
2015/08/12 职场文书
python 命令行传参方法总结
2021/05/25 Python
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js
JS实现简单九宫格抽奖
2022/06/28 Javascript