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压缩混淆工具
May 16 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
微信小程序工具函数封装
Oct 28 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和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
JavaScript中的this机制
2016/01/30 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
js实现中文实时时钟
2020/01/15 Javascript
python中的__slots__使用示例
2015/02/26 Python
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
使用python爬取B站千万级数据
2018/06/08 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
名词解释型面试题(主要是网络)
2013/12/27 面试题
为什么需要版本控制
2016/10/28 面试题
行政管理人员精品工作推荐信
2013/11/04 职场文书
生物技术研究生自荐信
2013/11/12 职场文书
小学教师国培感言
2014/02/08 职场文书
金融事务专业求职信
2014/04/25 职场文书
倡议书的写法
2014/08/30 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
教师节领导致辞
2015/07/29 职场文书
高考百日冲刺决心书
2015/09/23 职场文书