我想更新div“输出”的内容而不重新加载整个页面。当用户输入内容并点击运行按钮时，服务器将在 div“输出”上输出评估结果。但以下代码仅将 div“输出”放在浏览器上。另一页也不见了。我做错了什么？
<body>
<div class="container mx-auto">
<div th:insert="fragments/body :: navigation (true, ${spieler.name}, ${spieler.punkte}, ${spieler.level})"></div>
<div class="d-flex justify-content-center">
<label class="text-center mt-4" id="thetext">Du liebst Abenteuer und möchte endlich reisen.<br>
Du hast ein bisschen Geld und das reicht für ein Ticket zur nächsten Insel.<br>
Unglücklicherweise ist dein Schiff in einem Sturm gesunken. <br>
Du hat glück, an einen Strand zu landen. <br><br>
Jetzt musst du die Herausforderungen mit deinen SQL-Kenntnissen meistern.<br>
Je schneller du die Probleme löst, desto besser ist dein Ranking.<br><br>
Viel Spaß !!!<br>
</label>
</div>
<div class="d-flex justify-content-center">
<input id="startButton" onclick="nachsteFrage()" class="btn-secondary mt-4"
type="button" value="Weiter">
</div>
<form method="post" th:action="@{/level1-answer}" th:object="${answer}">
<div class="form-group">
<input type="text" class="form-control mt-4" id="codeArea" name="antwort" th:field = "*{SQL}"
rows="3" placeholder="Hier steht dein Code ...">
<br>
<div class="d-flex justify-content-center">
<button onclick="updateOutput()" class="btn-secondary mt-4"
id="ausfuehrenBtn">run</button>
</div>
</div>
</form>
<div id="output" style="overflow:scroll; height:400px;">
<span th:text = "${evaluation}"></>
</div>
</div>
<script th:inline="javascript">
function updateOutput() {
$.get("output").done(function(fragment) {
$("#output").replaceWith(fragment);
});
}
</script>
</body>
控制器
@RequestMapping(value="/level1-answer", method=RequestMethod.POST)
public String postSQL (Model map, @ModelAttribute("answer") Answer answer) {
map.addAttribute("evaluation",answer.getSQL() + " this is correct or incorrect");
return "level1 :: #output";
}
html文件位于templates/level1.html中
这是一个非常基本的演示，展示一种方法。
我从主网页开始
testajax.html<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Test Ajax Fragment</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h3>A Permanent Heading</h3>
<div id="output">
Some initial text displayed here. This will be replaced.
</div>
<br>
<button onclick="updateOutput()"
id="ausfuehrenBtn">run</button>
<script>
function updateOutput() {
$.post("test_ajax_frag").done(function (fragment) {
console.log(fragment);
$("#output").replaceWith(fragment);
});
}
</script>
</body>
</html>
请注意，这里没有
<form>显示该页面所用的控制器：
@RequestMapping(value="/test_ajax", method=RequestMethod.GET)
public String sendHtml(Model map) {
//map.addAttribute("foo", "bar");
return "testajax";
}
这是一个简单的
GETModelThymeleaf 片段模板是
testajaxfragment.html<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="test_frag">
<div id="output">
Some replacement content.
</div>
</div>
</body>
</html>
主页包含一个Ajax调用，当单击按钮时执行：
$.post("test_ajax_frag")
我们需要一个单独的控制器：
@RequestMapping(value="/test_ajax_frag", method=RequestMethod.POST)
public String sendHtmlFragment(Model map) {
//map.addAttribute("foo", "bar");
return "testajaxfragment :: test_frag";
}
在本例中，我选择在 Ajax 调用中使用 POST 请求 - 因此控制器也必须是一个
POST当控制器运行时，它会将 HTML 片段返回给调用它的 JavaScript 函数。然后该函数替换
output$("#output").replaceWith(fragment);
这是一种相当粗略的方法，但显示了您在问题和评论中询问的技术。
这对我有用 $(文档).ready(函数 () {
//call function when page is loaded
getContent();
//set on change listener
$('#selection').change(getContent);
function getContent() {
//create url to request fragment
var url = /content/;
if ($('#selection').val() === "Content 1") {
url = url + "content1";
} else {
url = url + "content2";
}
//load fragment and replace content
$('#replace_div').load(url);
}
})
</script>
https://riptutorial.com/thymeleaf/example/28530/replacing-fragments-with-ajax