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 相关文章推荐
基于jquery的监控数据是否发生改变
Apr 11 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 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怎样调用MSSQL的存储过程
2006/10/09 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
python采集博客中上传的QQ截图文件
2014/07/18 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
详解python数据结构和算法
2019/04/18 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
Python2与Python3的区别点整理
2019/12/12 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
python文件排序的方法总结
2020/09/13 Python
python实现发送邮件
2021/03/02 Python
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
初中家长评语大全
2014/12/26 职场文书
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js