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权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 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
第五节 克隆 [5]
2006/10/09 PHP
请php正则走开
2008/03/15 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
原生JS实现留言板功能
2020/02/08 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
python实现清屏的方法
2015/04/30 Python
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
python实现登录与注册系统
2020/11/30 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
苹果美国官方商城:Apple美国
2016/08/24 全球购物
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
大学生村官工作感言
2014/01/10 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript