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

AngularJS作为一个非常实用的前端框架，我们知道在AngularJS中有自己的Model和Controler。

angularJS中所有的请求都是通过js定义的Controler来完成的，也就是我们完全脱离了后台，

将整个应用程序的压力交给了客户端来完成。但是在实际开发的时候我们难免需要访问后台或者

与数据库进行交互，这个时候我们就需要一个类似于JQAJAX的方法来进行数据访问。

在angularJS中提供了一种与远程Http服务器交互的服务，$http

$http是angularJS中的一个可信服务，利用浏览器的XMLHTTPRequest核心对象与远程http服务器进行交互。

$http的使用方法也不难理解，与Jquery提供的$ajax操作比较类似。也支持get、post等。

使用格式：

// 简单的 GET 请求，可以改为 POST

$http({
method:'post',//提交方式
url:'Account/DoLogin',//提交路径
data:$scope.user,//传递到后台的数据，json对象
headers: {
  'Content-Type': 'application/x-www-form-urlencoded'
 }, //当post方式提交的时候需要加上这段来解决后台获取不到数据的问题
 transformRequest: function ( data ) {
  var str = '';
  for( var i in data ) {
   str += i + '=' + data[i] + '&';
  }
  return str.substring(0,str.length-1);
 }//解析json对象的自定义函数
}).then(function successCallback(response)
{
//请求成功执行的代码
},function errorCallback(response)
{
//请求失败执行的代码
});

POST与GET简写方法格式：

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

以上这篇AngularJS实现与后台服务器进行交互的示例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

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

    $http AngularJS提供了$http服务来同服务端进行通信,$http服务队浏览器的XMLHttpRequest对象进行了封装,让我们可以以ajax的方式来从服务器请求数据. 在AngularJS中与远程HTTP服务器交互时会用一个非常关键的服务-$http. 1.$http是angular中的一个核心服务,利用浏览器的xmlhttprequest或者via JSONP对象与远程HTTP服务器进行交互. 2.$http的使用方式和jquery提供的$.ajax操作比较相同,均支持多种m

  • angularjs实现与服务器交互分享

    真正的应用需要和真实的服务器进行交互,移动应用和新兴的Chrome桌面应用可能是个例外,但是对于此外的所有应用来说,无论你是想把数据持久化到云端,还是需要与其他用户进行实时交互,都需要让应用与服务器进行交互. 为了实现这一点,Angular提供了一个叫做$http的服务.它提供了一个可扩展的抽象方法列表,使得与服务器的交互更加容易.它支持HTTP.JSONP和CORS方式.它还包含了安全性支持,避免JSON格式的脆弱性和XSRF.它让你可以轻松地转换请求和响应数据,甚至还实现了简单的缓存. 例如

  • angularJS之$http：与服务器交互示例

    在angularJS中与远程HTTP服务器交互时会用一个非常关键的服务-$http. $http是angular中的一个核心服务,利用浏览器的xmlhttprequest或者via JSONP对象与远程HTTP服务器进行交互. $http的使用方式和jquery提供的$.ajax操作比较相同,均支持多种method的请求,get.post.put.delete等. $http的各种方式的请求更趋近于rest风格. 在controller中可通过与$scope同样的方式获取$http对象,e.g.

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

    AngularJS作为一个非常实用的前端框架,我们知道在AngularJS中有自己的Model和Controler. angularJS中所有的请求都是通过js定义的Controler来完成的,也就是我们完全脱离了后台, 将整个应用程序的压力交给了客户端来完成.但是在实际开发的时候我们难免需要访问后台或者 与数据库进行交互,这个时候我们就需要一个类似于JQAJAX的方法来进行数据访问. 在angularJS中提供了一种与远程Http服务器交互的服务,$http $http是angularJS中的

  • AngularJS指令与指令之间的交互功能示例

    AngularJS指令与指令之间的交互功能示例

    本文实例讲述了AngularJS指令与指令之间的交互功能.分享给大家供大家参考,具体如下: 前面一篇文章<AngularJS指令与控制器之间的交互功能示例>我们了解了指令与控制器之间的交互,接下来看看指令与指令之间是如何进行交互的. 1.首先来了解一下什么是独立scope 为了更好的理解独立scope,我们来看一段代码: <div ng-controller="myController1"> <hello></hello> <hel

  • Django 使用Ajax进行前后台交互的示例讲解

    本文要实现的功能是:根据下拉列表的选项将数据库中对应的内容显示在页面,选定要排除的选项后,提交剩余的选项到数据库. 为了方便前后台交互,利用了Ajax的GET和POST方法分别进行数据的获取和提交. 代码如下: <!--利用获取的数据进行表单内容的填充--> <script> $("#soft_id").change(function(){ var softtype=$("#soft_id").find("option:select

  • AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】

    AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】

    本文实例讲述了AngularJS与服务器Ajax交互操作.分享给大家供大家参考,具体如下: AngularJS从Web服务器请求资源都是通过Ajax来完成,所有的操作封装在$http服务中,$http服务是只能接收一个参数的函数,这个参数是一个对象,用来完成HTTP请求的一些配置,函数返回一个对象,具有success和error两个方法. 用法如下: $http({method:'post',url:'loginAction.do' }).success(function(data,status

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

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

  • AngularJS指令与控制器之间的交互功能示例

    本文实例讲述了AngularJS指令与控制器之间的交互功能.分享给大家供大家参考,具体如下: 本节我们来看控制器与指令之间的交互 1.首先来看最简单的,在指令中调用父控制器的方法: <div ng-controller="myController1"> </div> app.controller('myController1',['$scope',function($scope){ $scope.load=function(){ console.log('正在加

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

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

  • AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】

    AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】

    本文实例讲述了AngularJS实现与Java Web服务器交互操作的方法.分享给大家供大家参考,具体如下: AngularJS是Google工程师研发的产品,它的强大之处不是几句话就能描述的,只有真正使用过的人才能体会到,笔者准备在这篇文章中,以一个简单的登录校验的例子说明如何使用AngularJs和Web服务器进行交互. 准备工作 1.下载angular js库. 官网下载地址:https://angularjs.org/ 或者点击此处本站下载. 2.开发环境准备,由于是和Tomcat服务器

  • android选择视频文件上传到后台服务器

    本文实例为大家分享了android选择视频文件上传到后台服务器的具体代码,供大家参考,具体内容如下 选择本地视频文件 附上Demo 首先第一步打开打开相册选择视频文件: Intent intent = new Intent(); intent.setType("video/*"); intent.setAction(Intent.ACTION_GET_CONTENT); intent.addCategory(Intent.CATEGORY_OPENABLE); ((Activity)

随机推荐