即使提供了有效的URL，我的ajax调用仍返回404

Question

我有2个应用程序：

1> CurdAppBackend

2> CurdAppFrontend

两者都在Tomcat中的localhost：8080上同时运行。
我在FrontEndApp中有一个表单页面，它向BackEndApp发出ajax请求。
但是每当我提交数据时，它总是返回错误响应404

我尝试过使用网址 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));
            }
        });
    });

});

ControllerOf 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;

Errrror

{"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));
        }
    });
        });

    });