如何在SpringBoot中的Ajax和RestController之间发送数据?

时间:2019-02-24 11:16:18

标签: ajax spring-boot

我想使用POST方法将Ajax接收到的数据发送到RestController并在那里进行处理。然后,我想将将作为交易结果创建的列表返回给Ajax。

控制器

@Controller
public class AjaxController {

    @GetMapping("/web")
    public String web()
    {
        return "fake";
    }
}

Fake.html

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script>
        $( document ).ready(function() {
            $(function () {
                $("#ajaxselect1").on('change', function () {
                    var selectedValue1 = $("select[name=ajaxselect1]").val();
                    $.ajax({
                        type : "POST",
                        url :  "/ajaxrest",
                        data: {item: selectedValue1},
                        success : function(data){
                        }
                    });
                });
            });
        });
    </script>

</head>
<body>

<h1>AJAX TESTING</h1>

<div class="row">
    <div class="col">
        <select name="ajaxselect1" id="ajaxselect1" class="form-control" >
            <option value="Chose" selected>Chose</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </div>
</div>

</body>
</html>

RestController

@RestController
public class AjaxRest {

    @PostMapping("/ajaxrest")
public String testAjaxPost(@RequestParam("item") String item) {

        if(item.equals("1")){

            List<String> cars = new ArrayList<>();
            cars.add("bugatti");
            cars.add("ferrari");
            cars.add("honda");
            cars.add("mercedes");

        }
    }catch (Exception e){
    }
    return "hello-world!";
}

}

当我不发送任何数据时,Chrome控制台会将以下信息返回给我:

Chrome控制台错误

jquery.min.js:2 POST http://localhost:7070/ajaxrest 404
send    @   jquery.min.js:2
ajax    @   jquery.min.js:2
(anonymous) @   web:26
dispatch    @   jquery.min.js:2
y.handle    @   jquery.min.js:2
ListPicker._handleWindowTouchEnd

POST方法不起作用。如何使用POST方法运行它?如何在AjaxRestController之间发送数据?

1 个答案:

答案 0 :(得分:0)

您遇到什么确切的AJAX错误?由于您的if循环看起来不错,但这可能会有帮助,

Mode <- function(x) {
  ux <- unique(x)
  ux[which.max(tabulate(match(x, ux)))]
}

library(dplyr)
df %>%
  group_by(group) %>%
  mutate(consensus_name=Mode(setdiff(name[order(col2)],"")))
# # A tibble: 20 x 5
# # Groups:   group [4]
#    group col1    col2 name            consensus_name 
#    <int> <fct>  <int> <fct>           <chr>          
#  1     1 dog       40 canidae         canidae        
#  2     1 dog       40 canidae         canidae        
#  3     1 dog       40 canidae         canidae        
#  4     1 dog       40 canidae         canidae        
#  5     1 dog       40 ""              canidae        
#  6     1 dog       40 canidae         canidae        
#  7     1 dog       40 canidae         canidae        
#  8     2 frog      85 dendrobatidae   leptodactylidae
#  9     2 frog      89 leptodactylidae leptodactylidae
# 10     2 frog      89 leptodactylidae leptodactylidae
# 11     2 frog      82 leptodactylidae leptodactylidae
# 12     2 frog      89 ""              leptodactylidae
# 13     2 frog      81 ""              leptodactylidae
# 14     2 frog      89 dendrobatidae   leptodactylidae
# 15     3 horse     87 equidae1        equidae3       
# 16     3 donkey    76 equidae2        equidae3       
# 17     3 zebra     67 equidae3        equidae3       
# 18     4 bird      54 psittacidae     psittacidae    
# 19     4 bird      56 ""              psittacidae    
# 20     4 bird      34 ""              psittacidae