Ajax success JSON html output l oop - Отображение результатов только для наносекунд

Question

Ajax запрос, который возвращает массив в формате JSON. L oop через возвращенный массив, чтобы выплевывать записи из одного из столбцов и отображать их с помощью html divs.

Проблема в том, что результаты отображаются на веб-странице только в течение наносекунды и затем исчезают.

Нужно ли там предотвращать дефолт? Находятся ли фигурные скобки et c в правильных местах?

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

                }
             }
        });  
    });  
});  

Html:

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

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() документации:

Если вызывается этот метод, действие по умолчанию для события не будет запускаться.

Надеюсь, это поможет!