在Spring中如何在JSP頁面上向控制器創建AJAX JQuery？

Question

我目前正在制作兩個單獨的Ajax JQueries，它們將從Google Maps JavaScript頁面（緯度，經度，用戶搜索的位置的地址）傳遞值並傳遞給我的控制器類。 但是，對於每個請求，我都會收到不同的錯誤。

首次AJAX查詢在Google Developer Tools Console中導致以下錯誤：

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

控制器代碼//控制器類中的接收方法

     @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 }, 
})  

控制器代碼

 //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僅用於參數，數據將在正文中發送。

干杯