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 相关文章推荐
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
JavaScript中Object基础内部方法图
Feb 05 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 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 程序员也要学会使用“异常”
2009/06/16 PHP
PHP 变量定义和变量替换的方法
2009/07/30 PHP
PHP编程函数安全篇
2013/01/08 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
python实现将文本转换成语音的方法
2015/05/28 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
Python新手学习函数默认参数设置
2020/06/03 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
学徒工职责
2014/03/06 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
退学证明范本3篇
2014/10/29 职场文书
中秋节慰问信
2015/02/15 职场文书