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 相关文章推荐
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
解决layer图标icon不加载的问题
Sep 04 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原理的opcodes(操作码)
2010/10/26 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
yii数据库的查询方法
2015/12/28 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
python绘制圆柱体的方法
2018/07/02 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
销售行政专员职责
2014/01/03 职场文书
参观考察邀请函范文
2014/01/29 职场文书
秸秆管理实施方案
2014/03/15 职场文书
公司应聘自荐书
2014/06/14 职场文书
会计岗位说明书
2014/07/29 职场文书
个人廉政承诺书
2015/04/28 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS