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 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
用PHP实现文件上传二法
2006/10/09 PHP
php 更新数据库中断的解决方法
2009/06/05 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
python实现三壶谜题的示例详解
2020/11/02 Python
通信工程专业女生个人求职信
2013/09/21 职场文书
监理资料员岗位职责
2014/01/03 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
保安公司服务承诺书
2014/05/28 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
Java异常处理try catch的基本用法
2021/12/06 Java/Android
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis
nginx常用配置conf的示例代码详解
2022/03/21 Servers