欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-20 15:07:29
简述: angularjs诞生于2009年,由misko hevery 等人创建,后为google所收购。是一款优秀的前端js框架,已经被用于google的多款产品当中...

简述:

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