Spring AJAX调用与post无关，来自@ModelAttribute

Question

我试图用jquery向spring应用程序发送一个AJAX调用。我有一个情态，里面有一个表格：

<div id="editTileModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-lg">
    <form id="frmEditTileModal" modelAttribute="editTile" class="floating-labels " action="/DESSOApplicationPortalAdmin/rest/tile/002" method="POST">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="myLargeModalLabel">Edit Tile</h4>
        </div>
        <div class="modal-body">

            <div class="row">

                    <div class="col-md-6" >


                        <div class="form-group m-b-40 margin-top-20">
                            <input type="text" class="form-control" id="editTileId" name="id" required><span class="highlight"></span> <span class="bar"></span>
                            <label for="editTileId">Id</label>
                        </div>
                        <div class="form-group m-b-40">
                            <input type="text" class="form-control" id="editTileDescription" name="description" required><span class="highlight"></span> <span class="bar"></span>
                            <label for="editTileDescription">Description</label>
                        </div>
                        <div class="form-group m-b-40">
                            <input type="text" class="form-control" id="editTileRole" name="role" required><span class="highlight"></span> <span class="bar"></span>
                            <label for="editTileRole">Role</label>
                        </div>
                    </div>
                    <div class="col-md-6" >
                        <div class="form-group m-b-40 margin-top-20">
                            <input type="text" class="form-control" id="editTileTarget" name="target" required><span class="highlight"></span> <span class="bar"></span>
                            <label for="editTileTarget">Target</label>
                        </div>
                        <div class="form-group m-b-40">
                            <input type="text" class="form-control" id="editTileIndex" name="index" required><span class="highlight"></span> <span class="bar"></span>
                            <label for="editTileIndex">Index</label>
                        </div>
                        <div class="form-group m-b-40">
                            <input type="text" class="form-control" id="editTileTileimagename" name="tileImageName" required><span class="highlight"></span> <span class="bar"></span>
                            <label for="editTileTileimagename">Tile Image Name</label>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group m-b-40">
                            <input type="text" class="form-control" id="editTileUrl" name="url" required><span class="highlight"></span> <span class="bar"></span>
                            <label for="editTileUrl">Url</label>
                        </div>
                    </div>

                    <div class="col-md-12">                           
                        <div class="form-group m-b-40 form-check">
                            <label class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input">
                                <span class="custom-control-indicator"></span>
                                <span class="custom-control-description">Disable Tile</span>
                            </label>
                        </div>
                    </div>

                    <div class="row>">
                        <div class="col-sm-6 col-md-6 col-xs-12">
                            <div class="white-box">
                                <h3 class="box-title">Tile Image Normal</h3>
                                <label for="img-tile-normal">You can add a default value</label>
                                <input type="file" id="img-tile-normal" class="dropify" data-default-file="resources/vendor/plugins/bower_components/dropify/src/images/test-image-1.jpg" />
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-6 col-xs-12">
                            <div class="white-box">
                                <h3 class="box-title">Tile Image on Hover</h3>
                                <label for="img-tile-on-hover">You can add a default value</label>
                                <input type="file" id="img-tile-on-hover" class="dropify" data-default-file="resources/vendor/plugins/bower_components/dropify/src/images/test-image-1.jpg" />
                            </div>
                        </div>
                    </div>



            </div>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
            <button id="btnSaveEditTile" type="submit" class="btn btn-danger waves-effect waves-light">Save changes</button>
        </div>
    </div>
    </form> 
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->

这是jQuery

       $('#frmEditTileModal').submit(function (e) {
        e.preventDefault();
        alert("save edit start!");

        var editSuccesFunc = function () {
            alert('Success Edit!');
        };
        var editErrorFunc = function () {
            alert('Error Edit!');
        };

        var tileId = $('#editTileId').val();
        alert("data to send: " + $('#editTileId').val());

        var formData = new FormData();
        formData.append("id", $('#editTileId').val());
        formData.append("description", $('#editTileDescription').val());
        formData.append("role", $('#editTileRole').val());

        $.ajax({
            type: "POST",
            url: "/DESSOApplicationPortalAdmin/rest/tile/" + tileId,
            data: $('#frmEditTileModal').serialize(),
            contentType: "application/json",
            dataType: "json",
            success: editSuccesFunc,
            error: editErrorFunc
        });
    });

这是java控制器：

    @RestController
    @RequestMapping(value = "rest/tile")
public class TileRestController {

    @Autowired
     TileService tileService;

    @RequestMapping(value = "/{tileId}", method = RequestMethod.GET)
       public Tile getProductById(@PathVariable(value = "tileId") String tileId) {
        System.out.println("------------->" + this.getClass().getSimpleName() + ": getProductById called. Searching for Tile Id " + tileId);
        return tileService.getTileById(tileId);
    }

    @RequestMapping(value = "/{tileId}", method = RequestMethod.POST, produces = { MediaType.APPLICATION_JSON_VALUE })
    @ResponseBody
    public  Tile update( @ModelAttribute("editTile") Tile tile, @PathVariable(value = "tileId") String tileId) {
        Tile updatedTile = new Tile();
        //updatedTile.setId("099");
        //updatedTile.setDescription("ExampleTile");

        System.out.println("------------->" + this.getClass().getSimpleName() + " update method: print object fields: "+tile.toString());
        return updatedTile;
       //return tileService.updateTile(tile);

    }
}

当我尝试做一个正常的提交(没有ajax或jquery)时，控制器正确地将字段读取到对象。

但是，当我尝试执行与ajax调用相同的操作时，它正确地发送数据，但是控制器没有通过modelAttribute("editTile")将其映射到对象。这里有一张这门课的印刷品：

我是不是遗漏了什么？

编辑:我尝试了一个在答案中提出的建议，但似乎行不通。以下是我所做的：

我更改了更新方法的代码，以便使用@RequestBody注释

@RequestMapping(value = "/{tileId}", method = RequestMethod.POST, produces = { MediaType.APPLICATION_JSON_VALUE })
@ResponseBody
public  Tile update( @RequestBody Tile tile, @PathVariable(value = "tileId") String tileId) {
    Tile updatedTile = new Tile();
    //updatedTile.setId("099");
    //updatedTile.setDescription("ExampleTile");

    System.out.println("------------->" + this.getClass().getSimpleName() + " update method: print object fields: "+tile.toString());
    return updatedTile;
   //return tileService.updateTile(tile);

}

此外，我还更改了ajax调用的内容类型：

$.ajax({
            type: "POST",
            url: "/DESSOApplicationPortalAdmin/rest/tile/" + tileId,
            data: $('#frmEditTileModal').serialize(),
            contentType: "application/www-form-url-encoded",
            dataType: "json",
            success: editSuccesFunc,
            error: editErrorFunc
        });

但是，现在我得到了一个ajax错误，它甚至没有调用：

​

​

​

Answer 1

您似乎在发布来自ajax的JSON (内容类型: application/json)。

试着在Tile中使用@RequestBody而不是@ModelAttribute。

表单帖子通常以内容类型的形式发布:application/www- FORM -url编码。