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

来源：懂视网责编：小采时间：2020-11-27 22:10:17

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

AngularJS发送异步Get/Post请求方法:1、在页面中加入AngularJS并为页面绑定ng-app 和 ng-controller <body ng-app=MyApp ng-controller=MyCtrl > ... <script src=js/angular.min.js></script> <script src=

推荐度：

点击下载本文 文档为doc格式

导读AngularJS发送异步Get/Post请求方法:1、在页面中加入AngularJS并为页面绑定ng-app 和 ng-controller <body ng-app=MyApp ng-controller=MyCtrl > ... <script src=js/angular.min.js></script> <script src=

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发送异步Get/Post请求方法

推荐度：

点击下载本文 文档为doc格式

标签： get post请求 angularjs发送异步get/post请求方法

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐