Мой AJAX-вызов, возвращающий 404, даже с указанием действительного URL

Question

У меня есть 2 заявки:

1> CurdAppBackend

2> CurdAppFrontend

Оба работают одновременно в tomcat на локальном хосте: 8080.
У меня есть страница формы в FrontEndApp, которая делает запрос ajax в BackEndApp.
Но всякий раз, когда я отправляю данные, всегда возвращается ответ об ошибке 404

Я пытался с URL var url= "/CurdAppBackend/emp/save";
var url= "http://localhost:8080/CurdAppBackend/emp/save"
даже с
var url= "http://localhost:8080/CurdAppBackend/emp/save
url+"&format=json&callback=?"

jQueryCode

$(document).ready(function(){

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

        var url= "/CurdAppBackend/emp/save";
        $.ajax({
            url: url,
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data:  $('form[name=loginform]').serialize(),
            dataType: "application/json; charset=utf-8",
            processData: false,
            success: function(result){
                alert("SAVED")
            },
            error: function(error){
                alert(JSON.stringify(error));
            }
        });
    });

});

ControllerOd CurdAppBackEnd

@RestController
@RequestMapping("/emp")
public class EmployeeController {

    @Autowired
    private EmployeeService service;

    @Autowired
    private EmployeeDao dao;

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

        dtoo= service.insertEmp(dto);


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

Форма входа

<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>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jQuery/formPost.js"></script>
    </body>

EmployeeDto

private Long empId;
    @NotBlank(message="Name Cannot Be Blanked")
    private String empName;
    @NotNull(message="Mobile Canot Be Blanked")
    private Long empMobile;
    private Date createdAt;
    @NotBlank(message="Designation Must Not Be Blanked")
    private String empDesg;
    @NotBlank(message="Unit Must Not Be Blanked")
    private String unit;

Errror

{"readyState":4,"responseText":"","status":400,"statusText":"error"}

Answer 1

По вашей ошибке {"readyState":4,"responseText":"","status":400,"statusText":"error"}, это показывает, что это BAD Request. Проверьте тело запроса. Все ключи requested JSON соответствуют друг другу с атрибутами EmployeeDTO или нет. СЛЕДУЕТ console.log(fd); и проверить.

  $(document).ready(function(){

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


var ajaxData ={
    "empName"   :$("#empName").val(),
    "empMobile" :$("#empMobile").val(),
    "empDesg"   :$("#empDesg") .val(),
    "unit"      :$("#unit").val()
}
            var url= "/CurdAppBackend/emp/save";
           console.log(ajaxData); //check here the request body is matching or not
   $.ajax({
        url: url,
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data:  JSON.stringify(ajaxData),            
        processData: false,
        success: function(result){
            alert("SAVED")
        },
        error: function(error){
            alert(JSON.stringify(error));
        }
    });
        });

    });