`

AngularJS 使用$http服务POST提交数据

阅读更多

        笔者使用AngularJS的版本是1.6.0版本,下面的代码可能不太通用,仅供参考。

        AngularJS中调用ajax会使用到$http服务,使用$http服务发起POST请求的简单例子。

$http({  
		method:'post',  
		url:'${ctx}/province/handler/get',  
		data:{id:'${provinceId}'}  
}).then(
	function(result){  
		//do something
	}
);  

    最初并没有使用then方法来进行回调,使用的是success,之所以success方法,是参考很多的博客中的写法。在1.6.0这个版本中success和error方法已经废弃。

     在页面中定义的Controller中直接调用这个方法,就可以使用ajax了,于是就按照这个想法付诸实践,结果和自己预想的不一样,ajax请求是成功了,但是angular渲染失效了,而且这个时候控制台没有任何异常。将上面的代码注销之后,angular渲染正常。最初猜想难道AngularJS调用$http服务是有条件,毕竟$http是异步,难道必须要等到所有渲染完毕之后调用才可以。所以修改了自己的代码,等到angular渲染完毕之后,再发起ajax请求。

//AngularJS渲染完毕
			$scope.$watch('$viewContentLoaded', function() { 
				 $scope.get();
			}); 
			
			//渲染完毕触发事件 
			//定义一个方法来调用
			 $scope.get=function(){
					$http({  
						   method:'post',  
						   url:'${ctx}/province/handler/get',  
						   data:{id:'${provinceId}'}  
					}).then(
						function(result){  
							
				   		}
					);  	
			};

    修改代码之后,FireFox控制台终于报错了,后经过查阅是firefox中插件firebug引起的,建议更换其他浏览器或者移除firebug插件。这时在google浏览器下没有任何异常,而且angular渲染成功。这时移除了firebug插件,firefox浏览器也正常显示。

    因为火狐浏览器安装了Firebug插件,所以会产生上面的渲染失效问题,移除插件之后问题就解决。这时候上面的两种写法都是可以正常调用。

    还有第三种写法,与第一种写法很类似,但是第三种写法需要注意的是要先声明函数,然后再进行调用。

//定义一个方法来调用
			 $scope.get=function(){
					$http({  
						   method:'post',  
						   url:'${ctx}/province/handler/get',  
						   data:{id:'${provinceId}'}  
					}).then(
						function(result){  
							
				   		}
					);  	
			};
			//声明在调用方法之前
			$scope.get();

 

     

分享到:
评论

相关推荐

    AngularJS下$http服务Post方法传递json参数的实例

    本文主要介绍如何使用Angularjs $http服务以POST方法向服务器传递json对象数据。 具体如下: 一、$http POST方法默认提交数据的类型为application/json var data = {'wid':'0', 'praise' : '25'}; $http.post(url, ...

    深入理解Angularjs中$http.post与$.post

    总结来说,对于AngularJS开发者来说,理解$http.post和$.post之间的差异是很重要的,尤其是在处理数据序列化、请求头设置和不同服务端API期望接收的数据格式上。在编写代码时,应该充分考虑这些因素,以确保前后端...

    Angularjs中$http以post请求通过消息体传递参数的实现方法

    首先,Angularjs的$http服务能够以GET、POST、PUT、DELETE等方式与服务器端进行交互,而POST请求通常用于向服务器提交数据。在使用$http发送POST请求时,需要在请求的配置对象中指定"method"为"POST",并提供"url...

    AngularJs Post提交改造

    **AngularJS POST提交改造** ...通过以上讨论,我们了解了如何在AngularJS中对POST提交进行改造,包括设置请求头、数据转换、处理跨域请求、错误处理以及使用拦截器。这些技巧对于构建高效、安全的Web应用至关重要。

    后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法

    在开发Web应用时,前端与后端的数据交互是至关重要的,而使用AngularJS进行前端开发时,有时会遇到后端无法接收到通过$http.post发送的数据的问题。本文将深入探讨这个问题的原因,并提供相应的解决办法。 首先,...

    浅谈angularjs $http提交数据探索

    在本文中,我们将深入探讨AngularJS中的$http服务,特别是如何使用它来提交数据到服务器。AngularJS是一个流行的JavaScript框架,用于构建单页应用程序(SPA)。它提供了强大的数据绑定和依赖注入功能,使得前后端...

    angularJS 发起$http.post和$http.get请求的实现方法

    本篇文章将详细讲解如何使用$http服务发起POST和GET请求。 首先,我们来看AngularJS中发起HTTP POST请求的方法。POST请求通常用于向服务器提交数据。以下是一个基本的示例: ```javascript $http({ method: 'post...

    angularjs $http实现form表单提交示例

    本文将深入探讨如何使用AngularJS的$http服务来实现一个form表单的POST提交。在某些场景下,我们需要与服务器进行交互,比如向第三方后台接口发送数据,这时就可以利用$http服务来完成这一任务。 首先,我们来看一...

    AngularJS出现$http异步后台无法获取请求参数问题的解决方法

    其核心之一是$http服务,它允许开发者与服务器进行异步通信,即通过发送HTTP请求来获取或提交数据。但是,在进行$http异步请求时,有时候会出现后台无法正确获取请求参数的问题,这可能是由于AngularJS在发送请求时...

    AngularJS通过$http和服务器通信详解

    AngularJS通过$http服务支持GET、POST、PUT、DELETE等多种HTTP方法,遵循RESTful接口设计原则,提供了一种高效且便捷的方式来获取和提交数据。 使用$http服务的基本格式如下: ```javascript $http({ method: '...

    简介AngularJS中$http服务的用法

    在AngularJS中,`$http`服务是核心模块的一个关键组件,它负责处理与服务器的异步通信,即Ajax请求。...通过理解并熟练运用`$http`服务,开发者可以轻松实现数据的获取和提交,进而构建动态的单页应用程序。

    对比分析AngularJS中的$http.post与jQuery.post的区别

    很多时候我们需要用ajax提交post数据,angularjs与jq类似,也有封装好的post。 但是jQuery的post明显比angularjs的要简单一些,人性化一些。 AngularJS: 代码如下: ...可是,用angularjs的$http提交的数据

    解决angular的$http.post()提交数据时后台接收不到参数值问题的方法

    这两种方法都可以有效地解决AngularJS $http.post()提交数据时后台接收不到参数值的问题。选择哪种方法取决于你的项目需求和后端接口设计。通常,如果后端已经处理了JSON格式的数据,那么第二种方法更为简洁。同时,...

    angularJs中$scope数据序列化的实例

    在AngularJS中,$scope是应用中的模型层,它连接视图和控制器,负责存储和管理应用程序的数据。本文将深入探讨如何在AngularJS中实现$scope数据的序列化,并通过一个具体的实例来演示这一过程。 数据序列化是将对象...

    angularjs管理系统

    当用户提交表单时,可以通过$http服务向服务器发送POST请求,将新数据保存到数据库。 2. **读取(Read)**: 读取数据通常是通过HTTP GET请求从服务器获取。AngularJS的$http服务可以轻松地发起这些请求。数据返回后...

    AngularJS实现与后台服务器进行交互的示例讲解

    本文将详细介绍如何在AngularJS中使用$http服务来实现这一目标。 首先,AngularJS的Model和Controller是前端的核心组成部分,它们负责处理数据和业务逻辑。然而,在实际应用中,我们需要从服务器获取数据或向服务器...

    最新AngularJS开发宝典视频教程 后盾网AngularJS培训视频教程 后盾网.txt

    ├最新AngularJS开发宝典—第069讲 $http服务之后台接收POST数据的几种方式.mp4 ├最新AngularJS开发宝典—第070讲 spa项目的server层分析与使用factory创建服务.mp4 ├最新AngularJS开发宝典—第071讲 多个控制器...

    快速解决angularJS中用post方法时后台拿不到值的问题

    首先,问题的根源在于AngularJS的$http服务默认将POST请求的内容类型(Content-Type)设置为'application/json',而后台的PHP代码使用$_POST或$_REQUEST全局数组来接收数据。由于$_POST和$_REQUEST只能获取'...

    Angularjs2 http请求

    总结,AngularJS 2的HTTP服务提供了一种方便的方式来与后端服务器进行通信,通过导入Http模块、创建服务实例、发起HTTP请求以及处理响应,可以轻松地实现数据的获取和提交。了解并掌握这些基本概念和最佳实践,将有...

Global site tag (gtag.js) - Google Analytics