AngularJS发送异步Get/Post请求方法


Posted in Javascript onAugust 13, 2018

1、在页面中加入AngularJS并为页面绑定ng-app 和 ng-controller

<body ng-app="MyApp" ng-controller="MyCtrl" >
...
<script src="js/angular.min.js"></script>
<script src="js/sbt.js"></script>

2、添加必要的控件并绑定相应的事件

get:<input type="text" ng-model="param">{{param}} <br>
 post: <input type="text" ng-model="user.name"><input type="text" ng-model="user.password"><br>
 <button ng-click="get()">Get</button>
 <button ng-click="post()">Post</button>

3、在JS脚本中发送进行Get/Post请求

get

$scope.get = function () {
  $http.get("/get", {params: {param: $scope.param}})
   .success(function (data, header, config, status) {
    console.log(data);
   })
   .error(function (data, header, config, status) {
    console.log(data);
   })
  ;
 }

get 将参数放在URL中

$scope.get = function () {
  $http.get("/get?param="+$scope.param)
   .success(function (data, header, config, status) {
    console.log(data);
   })
   .error(function (data, header, config, status) {
    console.log(data);
   })
  ;
 }

post

$scope.post = function () {
  $http.post("/post", $scope.user)
   .success(function (data, header, config, status) {
    console.log(data);
   })
   .error(function (data, header, config, status) {
    console.log(data);
   })
  ;
 }

4、由Controller处理请求并返回结果

get

@RequestMapping("/get")
 @ResponseBody
 public Map<String,String> get(String param) {
  System.out.println("param:"+param);
  response.put("state", "success");//将数据放在Map对象中
  return response;
 }

post

@RequestMapping("/post2")
 @ResponseBody
 public void post2(@RequestBody User user, HttpServletResponse resp) {
  //返回不同的http状态
  if(user.getName()!=null&&!user.getName().equals("")){
   resp.setStatus(200);
  }
  else{
   resp.setStatus(300);
  }
 }

如果需要配置请求头部

$http({
   method : "POST",
   url : "/post",
   data : $scope.user
  }).success(function(data, header, config, status) {
   console.log(data);
  }).error(function(data, header, config, status) {
   console.log(data);
  });

5、由JS http请求的回调函数处理并执行下一步操作

HTML

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Request</title>
</head>

<body ng-app="MyApp" ng-controller="MyCtrl" >
get:<input type="text" ng-model="param"><br>
post: <input type="text" ng-model="user.name"><input type="text" ng-model="user.password"><br>
 <button ng-click="get()">Get</button>
 <button ng-click="post()">Post</button>
</body>
<script src="js/angular.min.js"></script>
<script src="js/sbt.js"></script>
</html>

sbt.js

var app = angular.module("MyApp", []);
app.controller("MyCtrl", function ($scope, $http) {

 $scope.get = function () {
  $http.get("/get", {params: {param: $scope.param}})
   .success(function (data, header, config, status) {
    console.log(data);
   })
   .error(function (response) {
    console.log(response);
   })
  ;
 }

 $scope.post = function () {
  $http.post("/post", $scope.user)
   .success(function (data, header, config, status) {
    console.log(data);
   })
   .error(function (data, header, config, status) {
    console.log(data);
   })
  ;
 }
});

以上这篇AngularJS发送异步Get/Post请求方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
vue后台管理之动态加载路由的方法
Aug 13 #Javascript
jQuery中$原理实例分析
Aug 13 #jQuery
Angular服务Request异步请求的实例讲解
Aug 13 #Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 #Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 #jQuery
Angular异步变同步处理方法
Aug 13 #Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 #Javascript
You might like
PHP安全性漫谈
2012/06/28 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
jQuery实现图片切换效果
2020/10/19 jQuery
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python处理中文编码和判断编码示例
2014/02/26 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
项目建议书范文
2014/05/12 职场文书
环保宣传标语
2014/06/12 职场文书
物理课外活动总结
2014/08/27 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
仙境之桥观后感
2015/06/16 职场文书
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android