我想在不重新加載整個頁面的情況下更新 div“輸出”的內容。當用戶輸入內容并點擊運行按鈕時，服務器將在 div“輸出”上輸出評估。但是下面的代碼只在瀏覽器上放置了 div“輸出”。另一頁不見了。我做錯了什么？
<body>
<div >
<div th:insert="fragments/body :: navigation (true, ${spieler.name}, ${spieler.punkte}, ${spieler.level})"></div>
<div >
<label 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 >
<input id="startButton" onclick="nachsteFrage()"
type="button" value="Weiter">
</div>
<form method="post" th:action="@{/level1-answer}" th:object="${answer}">
<div >
<input type="text" id="codeArea" name="antwort" th:field = "*{SQL}"
rows="3" placeholder="Hier steht dein Code ...">
<br>
<div >
<button onclick="updateOutput()"
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
uj5u.com熱心網友回復：
這是一個非常基本的演示，用于展示一種方法。
我從主網頁開始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>，因為我們不會提交任何表單資料——我們稍后將使用 Ajax 請求。
用于顯示此頁面的控制器：
@RequestMapping(value="/test_ajax", method=RequestMethod.GET)
public String sendHtml(Model map) {
//map.addAttribute("foo", "bar");
return "testajax";
}
這是一個簡單的GET處理程式，用于顯示初始頁面。Model在這種情況下，我什至沒有任何具體資料，只是為了保持演示簡單。
Thymeleaf 片段模板是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 函式。然后該函式替換outputdiv：
$("#output").replaceWith(fragment);
這是一種相當粗糙的方法，但顯示了您在問題和評論中詢問的技術。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/378819.html
標籤：javascript 弹簧靴 弹簧 mvc 百里香叶