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 相关文章推荐
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
vue.js实现简单购物车功能
May 30 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
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面向对象中常用的关键字和魔术方法
2017/02/04 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
浅谈js中的this问题
2017/08/31 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
Python中new方法的详解
2019/01/15 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
Django框架 信号调度原理解析
2019/09/04 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
最好的商品表达自己:Cafepress
2019/09/04 全球购物
外贸业务员求职信范文
2013/12/12 职场文书
人力资源专员岗位职责
2014/01/30 职场文书
职工趣味运动会方案
2014/02/10 职场文书
公司会计岗位职责
2014/02/13 职场文书
入职担保书怎么写
2014/05/12 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2014年班组长工作总结
2014/11/20 职场文书
优秀团员自我评价
2015/03/10 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
Python制作春联的示例代码
2022/01/22 Python