我正在尝试从thym叶页面发出Ajax请求。我已经看到了这个。
这是我的html页面:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Document</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></link>
<script>
function sendURL() {
var url = '/updatePing';
console.log("URI sent :)")
$("#resultsBlock").load(url);
}
</script>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Ping setup</div>
<div class="panel-body">
<form class="form-horizontal" th:object="${ping}" th:method="post" th:action="@{/updatePing}">
bla
bla
bla
<button id="submit-button" type="submit" class="btn btn-default" onclick="sendURL()">Submit</button>
</form>
</div>
</div>
<div id="resultsBlock">
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
我希望在按下按钮后调用js函数(sendURL()
),然后将参数发送到我的控制器。这部分也可以工作
但是来自控制器的答案并没有放在中
这是我的控制器:
@RequestMapping(value="/updatePing", method=RequestMethod.POST)
public String updatePing(@ModelAttribute PingDTO pingDTO) throws Exception{
PingRequestValidation pv=new PingRequestValidation();
if(pv.checkPingRequestValidation(pingDTO.getUrl())){
return "fragments/success";
}
else
return "fragments/failure";
}
问题是,控制器准确地呈现了成功和失败页面,同时我希望这些片段呈现在主页的结果块
标签中。
那么我该如何解决这个问题呢?
要使用ajax提交整个表单,请删除onclick
按钮并使用jQuery创建提交处理程序
$(function(){
$('#formId').on('submit', function(event){
event.preventDefault();// stop browser submitting from
var data = $(this).serialize();
$.post('/updatePing', data , function(response){
$("#resultsBlock").html(response);
}).fail(function(){
alert('Something went wrong')
});
});
});