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

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

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

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

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>` );

                }
             }
        });  
    });  
});  

$（文档）.ready（函数（）{
$（“：提交”）。单击（功能（e）{
var msg=$（“#搜索”）.val（）；
$.ajax({
url:'search.php'，
方法：'POST'，
数据：{
味精：味精
},
数据类型：“json”，
成功：功能（响应）{
for（对象的变量键。键（响应））{
$（'.content'）.append（`${response[key].MessageText}`）；
}
}
});  
});  
});  

Html:

从技术上讲，问题是当您单击
submit
时，它会刷新页面，这就是为什么您会在短时间内看到DOM的更改

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

$(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);
        });
      }
    });
  });
});

从文件：

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

我希望这有帮助
 从技术上讲，问题是当您单击
submit
时，它会刷新页面，这就是为什么您会在短时间内看到DOM的更改

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

$(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);
        });
      }
    });
  });
});

从文件：

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

我希望这有帮助
 考虑以下示例

$（函数（）{
$（“：提交”）。单击（功能（e）{
e、 预防默认值（）；
$.ajax({
url:'search.php'，
方法：“POST”，
数据：{
msg:$（“#搜索”）.val（）
},
数据类型：“json”，
成功：功能（响应）{
$。每个（响应、功能（i、v）{
var p=$（“”{
类别：“后项目-”+i
}).appendTo（$（“.content”）；
$("", {
类：“发布文本”
}).html（v.messageText）.appendTo（p）；
});
}
});
});
});

要阻止表单提交，您需要对事件应用
.preventDefault（）
。这将确保在默认情况下运行代码并提交表单数据。
考虑以下示例

$（函数（）{
$（“：提交”）。单击（功能（e）{
e、 预防默认值（）；
$.ajax({
url:'search.php'，
方法：“POST”，
数据：{
msg:$（“#搜索”）.val（）
},
数据类型：“json”，
成功：功能（响应）{
$。每个（响应、功能（i、v）{
var p=$（“”{
类别：“后项目-”+i
}).appendTo（$（“.content”）；
$("", {
类：“发布文本”
}).html（v.messageText）.appendTo（p）；
});
}
});
});
});

要阻止表单提交，您需要对事件应用
.preventDefault（）
。这将确保您的代码在默认情况下运行，表单将提交数据。
我猜您会在短时间内看到这些值，因为一旦提交，它将同时刷新浏览器中的页面。@norbitrial这很有意义。：）如果您仍然需要帮助，那么如果您发布jQuery为
找到的HTML元素：submit
，很乐意提供帮助。非常感谢@norbitrial。已将html代码添加到原始问题中。我想您会在短时间内看到其中的值，因为一旦提交，它会同时刷新浏览器中的页面。@norbitrial这很有意义。：）如果您仍然需要帮助，那么如果您发布jQuery为
找到的HTML元素：submit
，很乐意提供帮助。非常感谢@norbitrial。已将html代码添加到原始问题中。谢谢。因此，添加.preventdefault（）允许搜索结果保留在页面上，但如果我键入新的搜索词，页面不会更改；旧的结果只是留在页面上@norbitrial@CGarden然后，您需要在附加新结果之前清除旧结果。添加
$（“.content”）.html（“”）在
$.each（）
循环之前。谢谢。因此，添加.preventdefault（）允许搜索结果保留在页面上，但如果我键入新的搜索词，页面不会更改；旧的结果只是留在页面上@norbitrial@CGarden然后，您需要在附加新结果之前清除旧结果。添加
$（“.content”）.html（“”）
在
$.each（）
循环之前。感谢您的帮助，我在第一个答案中添加了注释。感谢您的帮助，我在第一个答案中添加了注释。
$(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);
        });
      }
    });
  });
});