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

在您的ajax请求后添加返回false; ，以防止页面刷新。

代码段


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

});

return false; }); });

});

return false; }); });

Answer 2

尝试一下：

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

Answer 3

AJAX是一项主要用于创建更多动态网站的技术，即无需完整的页面刷新或服务器往返即可更新部分网页。

您可以在此处阅读基础知识。 https://www.w3schools.com/asp/asp_ajax_intro.asp

您正在JavaScript中使用jQuery AJAX请求。因此，您可以发送和请求数据而不会阻塞或刷新页面。另外，您正在通过AJAX请求传递成功函数，该函数将在响应到达时异步执行。

您现在的目标是创建一个PHP Web服务，该服务将与您新创建的员工一起发送响应正文以及正确的http响应代码，以指示插入是否成功。

请参阅此处所述的解决方案，以开始使用php Web服务：

php web service example

并在此处阅读有关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

使用成功回调函数中的响应来更新您的员工集合和前端。

最后，如注释中所述。首次尝试时，请先使用其他内容，然后再使用用户数据，因为用户数据通常非常敏感，需要先进的技术。

要在此处完成此操作。您当前的代码不会更新整个页面！您的目标是在页面的特定部分使用响应，而无需更新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

如何防止页面刷新？ jQuery Ajax PHP

3 个答案: