Страница Ajax перезагружается после сохранения данных

Question

Я хочу сохранить данные, но моя страница перезагружается с сообщением json на следующей странице, как я могу остановить перезагрузку страницы.

Код Ajax:

jQuery(document).ready(function($)  {
    $("#add-data").submit(function (event)  {
event.preventDefault();
        $.ajax({
            type: "POST",
            url: "teachers",
            dataType: 'json',
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            data:  $(this).serialize(),
                success: function (data) {
                    alert("Added");


            },
        });
    });
});

Кнопка отправки:

<button type="submit"  class="btn btn-secondary btn-lg shadow-lg rounded" value="ADD" id="add-data"> <span class=" fa fa-plus"> </span> ADD</button>

Контроллер хранилища:

после сохранения, который работает нормально:

return response()->json([
            'status' => 'success',
            'msg' => 'New esecond has been saved'
        ]);

Answer 1

Это из-за того, что вы пытаетесь разместить данные в форме. Если вы используете button type = "submit", он перенаправит вас куда-то. Вам следует избегать использования type = "submit". Вместо этого используйте type = "button"

<button type = "button" class="btn btn-secondary btn-lg shadow-lg rounded" value="ADD" id="add-data"> <span class=" fa fa-plus"> </span> ADD</button>

и достигните этого, используя событие нажатия кнопки.

, затем получите его в jquery.

$("#add-data").click(function (event)  {
    //Your code here 
}

Answer 2

Удалите dataType: 'json', так как вы уже возвращаете JSON, иначе ваша кнопка кажется идеальной.

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

jQuery(document).ready(function($)  {
    $("#add-data").submit(function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "teachers",
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            data:  $(this).serialize(),
                success: function (data) {
                    alert("Added");


            },
        });
    });
});

Answer 3

Вы можете попробовать это вместо предотвращения по умолчанию. Перезагрузка происходит потому, что вы используете событие отправки формы.

$('#add-data').submit(false);

Если вы хотите использовать функцию предотвращения по умолчанию, используйте событие click кнопки отправки для выполнения действия.

$("#add-data").click(function (event)  {
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "teachers",
        dataType: 'json',
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        data:  $(this).serialize(),
            success: function (data) {
                alert("Added");
        },
    });
}

Answer 4

Добавить «return false;»в конце вашего обратного вызова submit.

Поскольку «add-data» является идентификатором вашей кнопки, для вашего примера она не смогла получить событие отправки. Это потому, что оно отправлено и не предотвращено.

Таким образом, вы можете написать что-то вроде этого:

$("form").submit(function (event)  {
    event.preventDefault();
    $.ajax({ ... });

    return false; // <<< THE THING
});

Или просто сделать это с привязкой события нажатия на кнопку (не для события отправки наbutton)

$("#add-data").click(function (event)  {
    event.preventDefault();
    $.ajax({ ... });
});

При этом вы можете оставить тип кнопки, и вам не нужно менять его на type = "button".