angularjs $http实现get和post请求

一时失言乱红尘 2022-06-14 07:47 262阅读 0赞

# angularjs $http实现get和post请求 #

本文主要介绍如何通过angularjs的$http实现get和post请求。

好，下面上货。

首先看一下后台的服务。

package com.xueyou.demo.controller;
    
    import com.xueyou.demo.pojo.Student;
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RestController;
    
    import java.util.ArrayList;
    import java.util.List;
    
    
    @RestController
    @CrossOrigin
    @RequestMapping("/request")
    public class RequestController {
    
        @RequestMapping(value = "/get", method = {RequestMethod.GET})
        public List<Student> getStudentList() {
            Student student = new Student(1, "xiaoming");
            List<Student> studentList = new ArrayList<>();
            studentList.add(student);
            return studentList;
        }
    
    
        @RequestMapping(value = "/post", method = {RequestMethod.POST})
        public List<Student> postStudentList() {
            Student student = new Student(2, "xiaohong");
            List<Student> studentList = new ArrayList<>();
            studentList.add(student);
            return studentList;
        }
    
    
    }

然后是angularjs的请求：

biPlateform.controller('mainController', function ($scope, $stateParams, $http) {
        $scope.test = "bbb";
        var c = $stateParams.id;
        console.log(c);
    
        $http.post(Setting.BASE_URL + "/request/post").success(function (data, status, headers, config) {
            console.log(data);
        }).error(function (data, status, headers, config) {
            console.error(data);
        });
    
        $http.get(Setting.BASE_URL + "/request/get").success(function (data, status, headers, config) {
            console.log(data);
        }).error(function (data, status, headers, config) {
            console.error(data);
        })
    });

下面看一下调用之后的结果：

![Center][]

注意，在服务端，也就是后台程序一定要加上@CrossOrigin，否则会出现跨域问题。

[Center]: /images/20220614/f47c0e5daeb04e5192a7a8c34808ce8b.png