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请求方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:
  • Angularjs中$http以post请求通过消息体传递参数的实现方法
  • 解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
  • AngularJS $http模块POST请求实现
  • angularJS 发起$http.post和$http.get请求的实现方法
  • angular中的post请求处理示例详解

转载请注明出处:http://www.jlunlp.com/article/20230331/65661.html

随机推荐

  1. angularjs 表单密码验证自定义指令实现代码

    html代码 form name="form" input type="password" name="password" ng-model="password" required placeholder="请输入密码" ...

  2. 对angularJs中ng-style动态改变样式的实例讲解

    如下所示： !doctype html html lang="en" head meta charset="UTF-8" script src="angular.min.js"/script /head body div ng-a...

  3. AngularJS 文件上传控件 ng-file-upload详解

    网上可以找到的 AngularJS 的文件上传控件有两个: angular-file-upload：https://github.com/nervgh/angular-file-upload ng-file-upload：https:...

  4. AngularJS中下拉框的基本用法示例

    本文实例讲述了AngularJS中下拉框的基本用法。分享给大家供大家参考，具体如下： HTML正文： div ng-app="myApp" ng-controller="myCtrl" select ng-model="selecte...

  5. AngularJS折叠菜单实现方法示例

    本文实例讲述了AngularJS折叠菜单实现方法。分享给大家供大家参考，具体如下： !DOCTYPE html html head meta name="viewport" content="width=device-w...

  6. AngularJS实现表单验证

    虽然我不是前端程序员，但明白前端做好验证是多么重要。 因为这样后端就可以多喘口气了，而且相比后端什么的果然还是前端可以提高用户的幸福感。 AngularJS提供了很方便的表单验证功能，在此记录一番。 首先从下面这段代码开始 复制代码 代...

  7. 利用Angularjs实现幻灯片效果

    前言 Jquery发展至今,幻灯组件已经非常成熟，所以下面小编带大家一起看看利用Angularjs实现幻灯片效果的步骤。 npm方式安装 npm install angularjsSlider 使用方法 第一步（引入） requ...

  8. AngularJS directive返回对象属性详解

    写在前面：由于directive部分是angularjs中的重中之重，所以会分多篇章进行讲解。本章主要讲解directive返回对象中比较简单的属性 angularjs中使用.directive()来定义指令，该方法接收两个参数：name...

  9. AngularJS 监听变量变化的实现方法

    如下所示： var timeout; $scope.$watch('search.subj',function (newVal, oldVal) { if (newVal !== oldVal) { if (timeout) $...

  10. AngularJS 2.0新特性有哪些

    AngularJS已然成为Web应用开发世界里最受欢迎的开源JavaScript框架。自成立以来，见证其成功的是惊人的经济增长以及团体的支持与采用——包括个人开发者、企业、社区。 Angular已经变成一个构建复杂单页面应用的客户端MVW...