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);    })});

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

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