AngularJS与后端php的数据交互方法

简述：

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的数据交互方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解php与ethereum客户端交互

    php与ethereum rpc server通信 一.Json RPC Json RPC就是基于json的远程过程调用,这么解释比较抽象.简单来说,就是post一个json格式的数据调用rpc server中的方法. 而这个json格式是固定的, 总的来说有这么几项: { "method": "", "params": [], "id": idNumber } method: 方法名 params: 参数列表 id: 对过程

  • php微信公众平台交互与接口详解

    php微信公众平台交互与接口详解

    本文分为三大部分为大家进行介绍,具体内容如下 1.微信用户.微信服务器和后台服务器的交互 例:微信用户向公众号发送一条文本消息,这条消息会首先传给微信服务器,微信服务器处理这条信息并将其以xml数据格式传递给后台服务器,后台服务器接受到数据后会对数据进行处理,再响应数据以xml数据格式传递给微信服务器,微信服务器再响应到用户微信界面. 微信用户与微信后台服务器之间的交互过程就是数据传递过程,只不过需要需要通过微信服务器这个中转站. 那么微信服务器这个中转站到底有什么用? 对xml数据进行加工包装

  • vue.js过滤器+ajax实现事件监听及后台php数据交互实例

    vue.js过滤器+ajax实现事件监听及后台php数据交互实例

    本文实例讲述了vue.js过滤器+ajax实现事件监听及后台php数据交互.分享给大家供大家参考,具体如下: 在vue.js开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. index.html: <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> v

  • 浅析PHP与Python进行数据交互

    最近,决定在一个项目用tp5进行APP接口开发,用Python做数据分析,然后这就面临一个问题:PHP和Python如何进行数据交互? 思路 我解决此问题的方法是利用了PHP的passthru函数来调用命令运行Python脚本. 代码 PHP代码 //php.php <?php $params = "value"; #传递给python脚本的入口参数 $path="python python.py "; //需要注意的是:末尾要加一个空格 passthru($

  • PHP与服务器文件系统的简单交互

    PHP与服务器文件系统的简单交互

    1.php.ini中关于文件上传的设置指令 2.文件上传过程 (1)上传文件提交表单html代码: <!--向服务器上传文件的HTML表单(限制为文本文件)--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Adminstration - upoload new files</title>

  • 利用php做服务器和web前端的界面进行交互

    利用php做服务器和web前端的界面进行交互

    PHP与Web页面交互是实现PHP网站与用户交互的重要手段.希望查看本篇文章的学者首先查看一下PHP的基础知识,因为今天用到这个东西,现学现卖吧.后续会更新php服务器的基础知识! 1.首先你要有一个界面   我这里利用我项目开发的一个简单界面截取下来进行讲解!项目机密  请勿**,你懂得! html代码和界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

  • PHP与以太坊交互详解

    自去年以来,我们正在开发区块链(Blockchain)业务.最近使用过Ethereum并使用PHP,所以我想我们应该聊聊这个话题. 这里有个前提: 1.理解区块链 2.对编程语言有了解 本文的主要内容: 1.开发环境 2.以太坊的介绍 3.准备JSON-RPC调用 4.从PHP访问 1.开发环境 我们将使用Ubuntu 14.04 LTS.安装操作系统后,输入预先确定的命令. $ sudo apt-get update $ sudo apt-get upgrade 之后我设置了SSH,iptab

  • PHP MYSQL简易交互式站点开发

    PHP MYSQL简易交互式站点开发

    目的:使用PHP和MYSQL模拟权限管理系统的实现 general用户只能查看其他用户信息,不能进行修改,添加,和删除操作,root用户可以完成以上三种操作. 实现思路 1.在MySQL数据库中建立两张数据表.一张数据表保存用户名和密码,用于登陆验证,另一张保存用户权限等基本信息. 2.提交表单登陆时,先在数据库中查找该用户存不存在,若不存在,报错,存在,则验证密码,密码错误则报错,若密码正确,登陆显示所有存储在数据库中的用户信息和当前登陆用户名. 3.在用户进行添加,删除操作时,先判断权限是否

  • AngularJS与后端php的数据交互方法

    简述: AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 它不仅仅是一个类库,而是提供了一个完整的框架.它避免了您和多个类库交互,需要熟悉多套接口的繁琐工作.它由Google Chrome的开发人员设计,引领着下一代Web应用开发.也许我们5年或10年后不会使用AngularJ

  • Spring MVC前端与后端5种ajax交互方法【总结】

    前端ajax与后端Spring MVC控制器有以下五种数据交互方式.(前台使用了dhtmlxGrid,后端使用了fastjson) 方式一 通过URL传参 通过URL挂接参数,如/auth/getUser?userid='6' 服务器端方法可编写为:getUser(String userid),也可新增其他参数如HttpSession, HttpServletRequest,HttpServletResponse,Mode,ModelAndView等. 方式二 单值传参 前台调用如: ajaxP

  • AngularJS $http post 传递参数数据的方法

    在cordova开发的时候使用到了$http的post方法,传递的参数服务端怎么都接收不到,搜索了下,发现使用AngularJS通过POST传递参数还是需要设置一些东西才可以! 1.不能直接使用params 例如: $http({ method: "POST", url: "http://192.168.2.2:8080/setId", params: { cellphoneId: "b373fed6be325f7"} }).success();

  • SpringBoot实现前后端、json数据交互以及Controller接收参数的几种常用方式

    SpringBoot实现前后端、json数据交互以及Controller接收参数的几种常用方式

    目录 前言 获取参数的几种常用注解 一.请求路径参数get请求 二.Body参数POST请求 四.HttpServletRequest 五.参数校检 最终选择交互方式 参考文献 总结 前言 现在大多数互联网项目都是采用前后端分离的方式开发,前端人员负责页面展示和数据获取,后端负责业务逻辑处理和接口封装.当与前端交互的过程当中,常用json数据与前端进行交互,这样想取出前端传送过来的json数据的时候,就需要用到@RequestBody这个注解.@RequestBody注解用于读取http请求的内

  • 前端如何调用后端接口进行数据交互详解(axios和SpringBoot)

    目录 一.介绍 二.项目结构 三.代码编写 四.运用 总结 前端调用后端接口,获得数据并渲染 一.介绍 一个完善的系统,前后端交互是必不可少的,这个过程可以分成下面几步: 前端向后端发起请求后端接口接收前端的参数后,开始层层调用方法处理数据后端将最终数据返回给前端接口前端请求成功后,将数据渲染至界面 对于初学者而言,前后端交互感觉十分困难,其实并不难,现在,我们做一个小例子,在例子中,大家就明白了. 二.项目结构 前端技术:axios 后端技术:SpringBoot(这个也无所谓,但是你一定要有

  • Vue2.0子同级组件之间数据交互方法

    熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结构如下 接着我们进入Demo,首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的App.vue应为这样 一.我们先来创建中央事件总线,在src/assets/下创建一个eventB

  • javascript前端和后台进行数据交互方法示例

    在开发中遇到了在没有jQuery的情况下需要与后台进行部分数据的交互,查找了部分资料使用JavaScript实现了操作,记录一下. //获取XMLHttpRequest对象用于与后台交互数据 function getXHR(){ var xmlHttp; try { xmlHttp=new XMLHttpRequest();//新版本浏览器 }catch(e) { try{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e)

  • thymeleaf中前后端数据交互方法汇总

    1. 引入静态资源:th:href或th:scr+@{/从static目录开始} <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <link th:href="@{/iamges/favicon.ico}" rel="external nofollow" type="image/x-icon"/> &

  • 详解angularJs中自定义directive的数据交互

    详解angularJs中自定义directive的数据交互

    就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模块分离.后者我暂时没接触,但数据交互部分却是一样的.所以举几个前者的例子,以备以后忘记. directive本身的作用域$scope可以选择是否封闭,不封闭则和其controller共用一个作用域$scope.例子如下: <body ng-app="myApp" ng-controller="myCtrl"> <test-directive><

  • 实现前后端数据交互方法汇总

    此文章适合前后端协同开发经验不足的新手阅读. HTML赋值 输出到 Element 的 value 或 data-name <input type="hidden" value="<?php echo $user_avatar;?>" /> <div data-value="<?php echo $user_avatar;?>"></div> 渲染结果 <input type=&q

随机推荐