как сохранить страницу от обновления?JQuery Ajax PHP

Question

Я создал форму, где я отправляю новые данные о сотрудниках в базу данных, используя jquery ajax и php.Данные отправляются и отображаются в базе данных, но как мне их получить, чтобы данные отображались на моей странице без обновления страницы?

Я хочу, чтобы данные появлялись на странице без обновления страницы.

Моя проблема: я могу отправить данные, но страница обновляется.Если я сделаю так, чтобы страница не обновлялась, она не будет отправлять данные.

    function createNewEmployee(){
require ('connection.php');
    $first = $_POST['first'];
    $last = $_POST['last'];
    $sin = $_POST['sin'];
    $pwd = $_POST['pwd'];
    $sql = "INSERT INTO employee (firstname, lastname, sin_, pass_) VALUES ('$first', '$last', '$sin', '$pwd');";
    mysqli_query($conn, $sql);
}




  <form id="addform" action="addemployee.php" method="POST">
<p>Add New Employee:<p>
    <input type="text" name="first" placeholder="First Name">
    <br>
    <input type="text" name="last" placeholder="Last Name">
    <br>
    <input type="text" name="sin" placeholder="SIN Number">
    <br>
    <input type="password" name="pwd" placeholder="Password">
    <br>
    <button type="button" id="submitbtn">Add</button>

    $(document).ready(function() {

  $("#submitbtn").click(function() {
    var first = $("#name").val();
    var last = $("#last").val();
    var sin = $("#sin").val();
    var pwd = $("pwd").val();

    $.ajax({
      type: "POST",
      data: {first:first,last:last,sin:sin,pwd:pwd},
      url: "addemployee.php",
      success: function(result) {
        $("#resultadd").html(response);
      }

    });
  });
});

Answer 1

Добавить return false; после вашего запроса ajax для предотвращения обновления страницы.

Фрагмент кода

$(document).ready(function() {
  $("#submitbtn").click(function() {
    var first = $("#name").val();
    var last = $("#last").val();
    var sin = $("#sin").val();
    var pwd = $("pwd").val();
    $.ajax({
      type: "POST",
      data: {first:first,last:last,sin:sin,pwd:pwd},
      url: "addemployee.php",
      success: function(result) {
        $("#resultadd").html(response);
      }</p>

<code>});

return false; }); });

Answer 2

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

Вы можете прочитать основы здесь.https://www.w3schools.com/asp/asp_ajax_intro.asp

Вы используете JQuery AJAX-запросы в JavaScript.Таким образом, вы можете отправлять и запрашивать данные, не блокируя и не обновляя страницу.Также вы передаете функцию успеха с вашим AJAX-запросом, который будет выполняться асинхронно при получении ответа.

Теперь ваша цель - создать веб-сервис PHP, который отправляет тело ответа с вашим вновь созданным сотрудником и правильнымhttp код ответа, указывающий, была ли вставка успешной.

См. приведенные здесь решения для начала работы с веб-службами php:

пример веб-службы php

и прочитайте о CRUD и REST, как здесь:

https://www.cloudways.com/blog/execute-crud-in-mysql-php/ https://www.codeofaninja.com/2017/02/create-simple-rest-api-in-php.html

Используйте ответ в функции обратного вызова Success для обновления коллекции сотрудников и внешнего интерфейса.

Наконец, как уже сказано в комментариях.Для ваших первых попыток используйте что-то другое, а не пользовательские данные, потому что пользовательские данные в основном очень чувствительны и нуждаются в продвинутых методах.

Для завершения здесь.Ваш текущий код не будет обновлять всю страницу! Ваша цель - использовать ответ в специальной части страницы без обновления страницы Wohle.Это концепция AJAX.

Также будьте осторожны с именами переменных.Это не может работать, потому что ответ не определен:

success: function(result) {
    $("#resultadd").html(response);
}

Просто для завершения я добавляю код:

$(document).ready(function() {
    $("#submitbtn").click(function() {
        var first = $("[name='first']").val();
        var last = $("[name='last']").val();

        $.ajax({
            type: "POST",
            data: {first: first, last: last},
            url: "https://main.xfiddle.com/51da1682/addEmp1.php",
            success: function(result) {
                $("#resultadd").html(result);
            }
        });
    });
});

<?php
    $dummyResponse->first = 'Foo';
    $dummyResponse->last = 'Bar';

    if (!$dummyResponse) {
        http_response_code(500);
        echo json_encode(mysqli_error());
    }

    http_response_code(200);
    echo json_encode($dummyResponse);
?>

Этот код работает для меня, см. Эту скрипку (действительныйна 2 дня).https://main.xfiddle.com/51da1682/addEmpApp4.php

Answer 3

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

     success: function() {
      location.reload();
window.location.href = "admin.php";
    }