Замените элемент html на jquery неработающий

Question

Я использую jquery для изменения элементов html из HTTP-ответа от jquery. Элемент в html действительно был изменен, но сразу же вернулся к исходному содержанию - похоже, страница обновилась. Пожалуйста, дайте несколько предложений. Вот мой код.

<form action="" method="get" id="test_form">
    <div class="form-group">
    <input type="text" class="form-control input-sm" >

     <input type="submit" class="btn btn-primary" id="submit-btn" onclick="submit_jquery()" value="">
    </div>
 </form>

<p id="p_test">123</p>

//// js code
function submit_jquery() {

    var i =0;

    $.ajax({
        type:"GET",
        async: false,
        url:"http://127.0.0.1:80",
        data:{source: i},
        dataType:"json",
        success:function(data){
            j = JSON.stringify(data);
            $("#p_test").replaceWith(j);

        },
        error: function(){

        }
    });

}

Answer 1

Поскольку вы обрабатываете отправку через jQuery / Ajax, вам необходимо обработать событие формы onSubmit и вернуть false, чтобы обычная отправка формы (которая перезагружает страницу) была отменена.

Попробуйте это

<form action="" method="get" id="test_form" onSubmit="return false">

Answer 2

Страница должна перезагружаться, потому что тип кнопки: submit

Вы можете изменить его на

<input type="button"> 

, что остановит обновление страницы

Answer 3

При работе с формами всегда слушайте событие отправки form, а не событие нажатия кнопки submit. Оба события срабатывают, но когда вы фокусируетесь на событии нажатия кнопки, вы не можете остановить действие формы по умолчанию при нажатии кнопки submit. Поэтому я бы выбрал следующий подход:

$(function() {
  $('#test_form').on('submit', function(e) {
    //stop form from submitting (defaut action)
    e.preventDefault();
    
    var i =0;

    $.ajax({
        type:"GET",
        async: false,
        url:"http://127.0.0.1:80",
        data:{source: i},
        dataType:"json",
        success:function(data){
            j = JSON.stringify(data);
            $("#p_test").replaceWith(j);

        },
        error: function(){

        }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="get" id="test_form">
    <div class="form-group">
    <input type="text" class="form-control input-sm" >

     <input type="submit" class="btn btn-primary" id="submit-btn" value="SUBMIT">
    </div>
 </form>

<p id="p_test">123</p>

Answer 4

Попробуйте ввести return false после ajax. Это предотвращает перенаправление страницы.

function submit_jquery(){
    // your code here

    return false;
}