javascript - 如何在Spring中将JSP页面上的AJAX JQuery制作为 Controller ？

Question

我目前正在制作两个单独的 Ajax JQueries，它们会将值从 google map javascript 页面(纬度、经度、用户搜索的位置的地址)传递到我的 Controller 类。但是，每个请求我都会收到不同的错误。

第一个 AJAX 查询会导致 Google 开发者工具控制台出现以下错误:

POST http://localhost:8080/results 403  (Forbidden)  jquery.min.js:4 

代码

  // This will send the lat/long values to one @RequestMapping method in the controller

  function sendLatLong(){

       $('.search_latitude').val(marker.getPosition().lat());
       $('.search_longitude').val(marker.getPosition().lng());

      var Lat = marker.getPosition().lat();
      console.log(Lat);

      var Long = marker.getPosition().lng();
      console.log(Long);


       $.ajax({
       type: "POST",
       url: "/results",
       data: { latitude: Lat, longitude: Long }, // parameters
  })
 }

Controller 代码 // Controller 类中的接收方法

     @RequestMapping(value = "/results", method = RequestMethod.POST
         , produces = {"application/json", "application/xml"}
         ,  consumes = {"application/x-www-form-urlencoded"}
 )
 public @ResponseBody  String Submit(GardaStation gardaStation, @RequestParam("latitude") double latitude,@RequestParam("longitude") double longitude) {

     //Print statment acting as a debug
     System.out.println(" ");
    System.out.println("Latitude: " + latitude + " Longitude: " + longitude + " from the client side");

    return "/";
 }

第二个 AJAX 查询导致浏览器中出现以下白色标签错误

There was an unexpected error (type=Forbidden, status=403).
Invalid CSRF Token 'null' was found on the request parameter '_csrf' or header 'X-CSRF-TOKEN'.

JSP端代码

// I want to achieve the similar result as above but include an address and send it to a different method
function saveAreaToUser(){

           $('.search_latitude').val(marker.getPosition().lat());
           var Lat = marker.getPosition().lat();
           console.log(Lat);

           $('.search_longitude').val(marker.getPosition().lng());
           var Long = marker.getPosition().lng();
           console.log(Long);

           $('.search_addr').val(results[0].formatted_address);
           var Address = results[0].formatted_address;
           console.log(Address);



        $.ajax({
         type: "POST",
         url: "/saveAreaToProfile",
         data: { latitude: Lat, longitude: Long, address: Address }, 
})  

Controller 代码

 //The recieving method in the controller class
        @RequestMapping(value = "/saveAreaToProfile", method = RequestMethod.POST)
    public String saveAreaToProfile(@Valid Area area, @RequestParam("latitude") double latitude,@RequestParam("longitude") double longitude, 
            @RequestParam("address") String address) {

    //Print statment acting as a debug
    System.out.println("Latitude: " + latitude + " Longitude: " + longitude + " Address:" + address + " from the client side");

    return "/savedAreas";
}

是否有以下原因: 1)为什么会发生这种情况？ 2)或多或少相同的代码会出现不同的错误

Answer 1

看来您正在传递数据中的坐标，请使用 @RequestBody 以 JSON 形式发送数据，并在 java 代码中使用 JSON 解析器并获取坐标

http://www.baeldung.com/spring-request-response-body你可以看看这个。

@RequestParam 仅用于参数，数据将在 Body 中发送。

干杯