Ajax 成功 JSON html 输出循环 - 仅显示纳秒的结果

Question

Ajax 请求，返回 JSON 格式的数组。循环遍历返回的数组以从其中一列中吐出条目并使用 htmldiv 显示。

问题是结果只在网页上显示一纳秒，然后消失。

我需要防止违约吗？大括号等是否在正确的位置？

JQuery 片段：

$(document).ready(function(){
$(":submit").click(function(e){
var msg = $("#search").val();
$.ajax({
url:'search.php',
method:'POST',
data:{
msg:msg
},
dataType: 'json',
success: function(response) {
for( var key of Object.keys( response ) ) {
$( '.content' ).append( `<div class="post"><div class="post-text">${response[key].MessageText}</div></div>` );
}
}
});  
});  
});  

目录：

<form action="index.php" method="post" autocomplete="on"><pre>
<input name="msg" id="search" type="text" autofocus value= "<?php if(isset($_POST['msg'])) { 
echo htmlentities ($_POST['msg']); }?>"></input> <span id="error"></span>
<input type="submit" id="submit" style="border:0; padding:0; font-size:0">
</pre></form>
<div class="content"></div>

Answer 1

请考虑以下示例。

$(function() {
$(":submit").click(function(e) {
e.preventDefault();
$.ajax({
url: 'search.php',
method: 'POST',
data: {
msg: $("#search").val()
},
dataType: 'json',
success: function(response) {
$.each(response, function(i, v) {
var p = $("<div>", {
class: "post item-" + i
}).appendTo($(".content"));
$("<div>", {
class: "post-text"
}).html(v.messageText).appendTo(p);
});
}
});
});
});

要阻止表单提交，您需要对活动应用.preventDefault()。这将确保您的代码运行，并且表单默认提交数据。

Answer 2

从技术上讲，问题是当您单击submit然后刷新页面时，这就是为什么您看到 DOM 仅在短时间内发生变化的原因。

也许您可以尝试以下方法：

$(document).ready(function(){
$(":submit").click(function(e) {
var msg = $("#search").val();
$.ajax({
// ajax call details
});
// this step should stop refreshing the page
e.preventDefault();
});  
});  

从event.preventDefault()文档中：

如果调用此方法，则不会触发事件的默认操作。

我希望这有所帮助！