Как отправить данные формы непосредственно на контроллер вместо извлечения по одному

Question

Я участвую в проекте, который использует Spring для backend и jquery для frontend и ajax для установления связи между ними.

Я застрял при публикации данных формы через ajax.

Мне нужно отправить данные формы в контроллер, но когда я отправляю данные формы напрямую, появляется ошибка 400, но если то же самое я делаю, получая входные данные один за другим и отправляя данные, он успешно сохраняется.

Предположим, что моя форма содержит более 30 полей, и я не думаю, что это будет удобный способ извлекать поля одно за другим и отправлять на сервер.

Я должен отправить все данные формы за один раз.

Код, который я получаю 400

$(document).ready(function(){


    $("#save").click(function(){

        alert(JSON.stringify(formData));
        var url= "http://localhost:8080/CurdAppBackend/emp/save";
        $.post({
            url: url,
            data: JSON.stringify($('form[name=loginform]').serialize()),
            dataType: "json",
            contentType: "application/json",
            processData: false,
            success: function(result){
                alert("SAVED")
            },
            error: function(error){
                alert(JSON.stringify(error));
            }
        });
    });

});

Тот же код успешно сохранен в БД

$(document).ready(function(){


    $("#save").click(function(){

        alert(JSON.stringify(formData));
        var url= "http://localhost:8080/CurdAppBackend/emp/save";
        $.post({
            url: url,
            data: {
                "empName":$("#empName").val(),
                "empMob":$("#empMob").val(),
                "empDesg":$("#empDesg").val(),
                "unit":$("#unit").val()
            },
            dataType: "json",
            contentType: "application/json",
            processData: false,
            success: function(result){
                alert("SAVED")
            },
            error: function(error){
                alert(JSON.stringify(error));
            }
        });
    });

});

Теперь просто наблюдайте. Я сослался на некоторую документацию, также пытался различными способами отправить данные формы на сервер, но все тщетно, кроме ручного, получая один за другим.

LoginForm

<div class="container">
        <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <div class="panel-title">Add Employee</div>
                    <div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Need
                            Help?</a></div>
                </div>

                <div style="padding-top:30px" class="panel-body">

                    <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>

                    <form id="loginform" class="form-horizontal" role="form" name="loginform">

                        <div style="margin-bottom: 25px" class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input id="empName" type="text" class="form-control" name="empName" value=""
                                placeholder="employee name">
                        </div>

                        <div style="margin-bottom: 25px" class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                            <input id="empMobile" type="text" class="form-control" name="empMobile"
                                placeholder="mobile">
                        </div>

                        <div style="margin-bottom: 25px" class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                            <input id="empDesg" type="text" class="form-control" name="empDesg"
                                placeholder="designation">
                        </div>

                        <div style="margin-bottom: 25px" class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                            <input id="unit" type="text" class="form-control" name="unit"
                                placeholder="unit">
                        </div>

                        <div style="margin-top:10px" class="form-group">
                            <!-- Button -->

                            <div class="col-sm-12 controls">
                                <a id="save" href="#" class="btn btn-success">Save </a>

                            </div>
                        </div>
                    </form>



                </div>
            </div>
        </div>
    </div>

Контроллер

@PostMapping("/save") 
    public ResponseEntity<EmployeeDTO> insertRecord(@ModelAttribute @Valid @RequestBody EmployeeDTO dto) {
        EmployeeDTO dtoo= null;

        dtoo= service.insertEmp(dto);


        return new ResponseEntity<EmployeeDTO>(dtoo,HttpStatus.OK);
    }

Может кто-нибудь иметь представление о том, как отправить данные формы напрямую, а не извлекать их?

Answer 1

Попробуйте использовать следующий код:

$(document).ready(function(){
    $("#save").click(function(){

        alert(JSON.stringify(formData));
        var data = $('form[name=loginform]').serializeArray(); 
        var url= "http://localhost:8080/CurdAppBackend/emp/save";
        $.post({
            url: url,
            data: JSON.stringify(data),
            dataType: "json",
            contentType: "application/json",
            processData: false,
            success: function(result){
                alert("SAVED")
            },
            error: function(error){
                alert(JSON.stringify(error));
            }
        });
    });

});

Если вы хотите преобразовать данные в Json, serializeArray() является более подходящим соответствием, так как данные структурированы, и их прохождение через JSON.stringfy() приведет кСтрока Json.Serialize () создаст закодированную строку, но она не подходит для использования с вызовом jquery ajax, так как данные параметров запроса POST ожидают JSON, поскольку вы установили тип содержимого как "application/json".

JS Fiddle: https://jsfiddle.net/anantha005/wj0c4rdx/2/

Ссылка: https://api.jquery.com/serializeArray/