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让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
C++中的string类的用法小结
Aug 07 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
JS中offset和匀速动画详解
Feb 06 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 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实现下载功能的代码
2012/09/29 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
php验证码生成器
2017/05/24 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
JavaScript类库D
2010/10/24 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
nodeJS模块简单用法示例
2018/04/21 NodeJs
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
python的else子句使用指南
2016/02/27 Python
python实现录音小程序
2020/10/26 Python
Python中反射和描述器总结
2018/09/23 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
keras输出预测值和真实值方式
2020/06/27 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
如何理解transaction事务的概念
2015/05/27 面试题
2016大一新生入学教育心得体会
2016/01/23 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python
Redis RDB技术底层原理详解
2021/09/04 Redis
Golang表示枚举类型的详细讲解
2021/09/04 Golang
Python闭包的定义和使用方法
2022/04/11 Python