浅谈angularjs $http提交数据探索

前两天在搞自己的项目，前端射流研究…框架用的是angularjs框架；网站整的差不多的时候出事了；那就是当我用$http.post()方法向服务器提交一些数据的时候；后台总是接收不到数据；

于是采用了其他方法暂时性替代一下；

今天正好有时间研究这个事情；网上查了很多资料；都试了试；都是不太好；但是还是给我提供了一些解决问题的思路；

正文开始：首先做了个演示如下；主要是为了比较他们的不同之处；

超文本标记语言如下：

div class=' container-fluid ' data-ng-app=' jjd ' data-ng-controller=' index ' div class=' container ' div class=' row ' div class=' col-MD-5 ' p class=' H4文本中心' jq的$.岗位()提交/p p /p div class='form-group '标签为='范例输入项目1 '用户名/标签输入类型=' text ' ng-model=' sdata。name ' class=' form-control ' placeholder='用户名/div class=' form-group '标签为=' '密码/标签输入类型=' password ' ng-model=' sdata。pwd ' class=' form-control '占位符='密码/div button type=' button ' class=' BTN BTN-主要BTN-block ' ng-click=' jPostData()' Jq提交/button/div class=' col-MD-2 '/div class=' col-MD-5 ' p class=' H4文本中心' anglarjs的$http.post()功能/p p /p div class='form-group '标签为='范例输入项目1 '用户名/标签输入类型=' text ' ng-model=' sdata 2。name ' class=' form-control ' placeholder='用户名/div class=' form-group '标签为=' '密码/标签输入类型=' password ' ng-model=' sdata 2。pwd ' class=' form-control '占位符='密码/div button type=' button ' class=' BTN BTN-主要BTN-block ' ng-click=' apostodata()' $ http提交/button /div /div /div/div js代码如下：

var app=angular.module('jjd '，[])；app.controller('index '，function($scope，$ http){ $ scope。sdata={ name : ' jQuery '，pwd : ' jQuery ' }；$ scope。sdata 2={ name : ' Anglarjs '，pwd : ' Anglarjs ' }；/*jQ的创建交互式、快速动态网页应用的网页开发技术提交*/$作用域。jpostdata=function(){//console。日志($ scope)。sdata)；$.post('/web/data.php '，$scope.sdata，function(d){ console。日志(d)；}) };/*angularjs的$http提交*/$作用域。aposto data=function(){ $ http({ URL : '/web/data。PHP '，method: 'POST '，data:$scope.sdata2 } }).成功（函数(da){控制台。log(da))；});};});后台采用服务器端编程语言(专业超文本预处理器的缩写)的$_POST接收：

？phpheader(' Content-type : text/html；charset=utf-8 ')；$ aname=$ _ POST[' name ']；$ apwd=$ _ POST[' pwd ']；$ msg=array()；$ msg[' name ']=$ aname；$ msg[' pwd ']=$ apwd；echo JSON _ encode($ msg)；服务器采用wampsever的本地启动的本地服务器。致此，页面服务搭建完毕；开始测试；

结果如图：

从上图的对比中可以看出后台接收不到值得原因主要是1、2、3处不同；

其中一和2是请求的头文件信息；

3是数据类型不同；日本季刊日本季刊发送的是表单数据；而angularjs默认发送的是json数据；

产生原因已经找到；下面开始改造；

首先针对一和2,在$http()的方法中配置页眉信息；

其次对数据进行转换；这里我做了个简单的json到线转换的服务；

改造后的代码如下：

/* - 创建angularjs应用- */var app=angular.module('jjd '，[])；/*创建json格式到线的转换服务*/app.service('jsonToStr '，function(){ this。transform=function(jsonData){ var string=' '；for(JSON数据中的字符串){ string=string str '=' JSON数据[str]'；} var _ last=字符串。last indexof(" ")；string=string.substring(0，_ last)；返回字符串；};});/* - 首页控制器- */app.controller('index '，function($scope，$http，jsonToStr){//注入创建的jsonToStr服务$scope.sdata={ name:'jQuery '，pwd : ' jQuery ' }；$ scope。sdata 2={ name : ' Anglarjs '，pwd : ' Anglarjs ' }；/*jQ的创建交互式、快速动态网页应用的网页开发技术提交*/$作用域。jpostdata=function(){//console。日志($ scope)。sdata)；$.post('/web/data.php '，$scope.sdata，function(d){ console。日志(d)；}) };/*angularjs的$http提交*/$作用域。aposto data=function(){//console。日志(jsontostr。transform($ scope)。sdata 2))；$http({ url: '/web/data.php '，method: 'POST '，data:$scope.sdata2，data : jsontostr。transform($ scope)。sdata 2)，//对提交的数据格式化报头RS : { ' Accept ' : ' */*，内容类型' : '应用程序/x-www-form-URL编码；字符集=UTF-8' } }).成功（函数(da){控制台。log(da))；});};});致此，angularjs提交数据后台接收不到的问题解决（只针对json数据格式);献给奋斗中的小伙伴；

这个问题应该还有一种思路；就是在服务端进行对获取json格式的数据的支持，有兴趣的小伙伴可以尝试一下；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。