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创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
js+css实现导航效果实例
Feb 10 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 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
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
Python中的包和模块实例
2014/11/22 Python
Django验证码的生成与使用示例
2017/05/20 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
斯福泰克软件测试面试题
2015/02/16 面试题
市场营销工作计划书
2014/05/06 职场文书
品酒会策划方案
2014/05/26 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
创先争优宣传标语
2014/10/08 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
活动主持人开场白
2015/05/28 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
Python如何导出导入所有依赖包详解
2021/06/08 Python
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
Pygame Time时间控制的具体使用详解
2021/11/17 Python
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript