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 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
js实现简单放大镜效果
Mar 07 Javascript
vue修饰符.capture和.self的区别
Apr 22 Vue.js
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
7个超级实用的PHP代码片段
2011/07/11 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
Javascript 去除数组的重复元素
2010/05/04 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
Python函数学习笔记
2008/10/07 Python
Python json模块使用实例
2015/04/11 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
销售冠军获奖感言
2014/02/03 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
逃课上网检讨书
2014/02/20 职场文书
初中作文评语大全
2014/04/23 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
2014年销售部工作总结
2014/12/01 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
大学生英文求职信范文
2015/03/19 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
项目投资意向书范本
2015/05/09 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis