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

【问题标题】：Ajax success JSON html output loop - Results displaying for Nano-second onlyAjax 成功 JSON html 输出循环 - 仅显示纳秒的结果
【发布时间】：2020-04-23 12:31:28
【问题描述】：

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

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

我需要在那里防止默认设置吗？大括号等是否在正确的位置？

JQuery sn-p:

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

                }
             }
        });  
    });  
});

HTML：

<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>

【问题讨论】：

我猜你会在短时间内看到那里的值，因为一旦你提交它就会同时刷新浏览器中的页面。
@norbitrial 这很有意义。 :)
如果您仍然需要帮助，那么如果您发布 jQuery 为:submit 找到的 HTML 元素，很乐意提供帮助。
谢谢@norbitrial 非常感谢。已将 html 代码添加到原始问题中。

标签： jquery html arrays json ajax

【解决方案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()。这将确保您的代码运行并且表单默认提交数据。

【讨论】：

谢谢。因此，添加 .preventdefault() 允许搜索结果保留在页面上，但如果我输入新的搜索词，页面不会改变；旧的结果只保留在页面上。 @norbitrial
@CGarden 那么您需要在添加新结果之前清除旧结果。在$.each() 循环之前添加$(".content").html("");。

【解决方案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() 文档：

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

希望对你有帮助！

【讨论】：

感谢您的帮助，我在第一个答案中添加了注释。