[英]Spring Web Mvc jQuery AJAX call with post not bidinding from with @ModelAttribute
I am trying to send an AJAX call with jquery to a spring web mvc application. 我正在尝试将带有jquery的AJAX调用发送到spring web mvc应用程序。 I have a modal which contains a form: 我有一个包含形式的模态:
<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 -->
This is the jQuery 这是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
});
});
and this is the java controller: 这是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);
}
}
When I try a doing a normal submit (no ajax or jquery) the controller correctly reads the field to the object. 当我尝试执行常规提交(无ajax或jquery)时,控制器会正确读取该对象的字段。
However when, I try doing the same as an ajax call, it correctly sends the data but the controllers does not map it to an object via modelAttribute("editTile"). 但是,当我尝试执行与ajax调用相同的操作时,它可以正确发送数据,但控制器不会通过modelAttribute(“ editTile”)将其映射到对象。 Here is a print of the class: 这是班级的照片:
------------->TileRestController update method: print object fields: Tile{ tileImageName=null, description=null, role=null, url=null, target=null, index=0, id=null, disabled=false} -------------> TileRestController更新方法:打印对象字段:Tile {tileImageName = null,description = null,role = null,url = null,target = null,index = 0,id = null,disabled = false}
Am I missing something? 我想念什么吗?
EDIT: I tried a suggestion made in the answers, but it did not seem to work. 编辑:我尝试了答案中提出的建议,但似乎没有用。 Here is what I did: 这是我所做的:
I change the code of the update method in order to use the @RequestBody annotation 我更改了更新方法的代码,以便使用@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);
}
plus, I changed my content type as well for the ajax call: 另外,我还针对ajax调用更改了内容类型:
$.ajax({
type: "POST",
url: "/DESSOApplicationPortalAdmin/rest/tile/" + tileId,
data: $('#frmEditTileModal').serialize(),
contentType: "application/www-form-url-encoded",
dataType: "json",
success: editSuccesFunc,
error: editErrorFunc
});
however, now I get an ajax error, it it does not even make the call: 但是,现在我遇到了一个ajax错误,它甚至没有调用:
You seem to be Posting a JSON (content-type: application/json) from ajax. 您似乎正在从ajax发布JSON(内容类型:application / json)。
Try using @RequestBody
instead of @ModelAttribute
for the Tile. 尝试使用@RequestBody
代替Tile的@ModelAttribute
。
A FORM post normally gets post'ed as content-type: application/www-form-url-encoded. FORM帖子通常以内容类型发布:application / www-form-url-encoded。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.