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模块化是什么及其优缺点介绍
Sep 02 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 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
在数据量大(超过10万)的情况下
2007/01/15 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
PHP循环结构实例讲解
2014/02/10 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
PHP实现百度人脸识别
2019/05/06 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
javascript基本算法汇总
2016/03/09 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
js+css实现打字效果
2020/06/24 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
党的群众路线学习材料
2014/05/16 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
家装电话营销开场白
2015/05/29 职场文书
雷锋观后感
2015/06/10 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript