Как отправить данные между Ajax и RestController в SpringBoot? - PullRequest
Новая
       11

Как отправить данные между Ajax и RestController в SpringBoot?

0 голосов
/ 24 февраля 2019

Я хочу отправить данные, полученные Ajax, в RestController методом POST и обработать их там.Затем я хочу вернуть список, который будет создан в результате транзакции, в 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 Console возвращает мне эту информацию:

Ошибка консоли 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?Как отправить данные между Ajax и RestController?

1 Ответ

0 голосов
/ 24 февраля 2019

Какую именно ошибку AJAX вы получаете?Поскольку ваш цикл if выглядит хорошо, но это может помочь, 

@RestController
public class AjaxRest {

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

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

            //If the incoming data is 1, I want to send this list to Ajax.
            List<String> cars = new ArrayList<>();
            cars.add("bugatti");
            cars.add("ferrari");
            cars.add("honda");
            cars.add("mercedes");
           // Send list of cars 
           return cars;

        }
else{
// Your business logic
return "your_value";
}

    }

}
...