php - jQuery/AJAX 检索新插入记录的 ID 并在页面刷新之前在 HTML 中使用它

Question

使用 jQuery/AJAX，我正在尝试 a) 更新 HTML 表中的现有记录，该表由 $firstname、$lastname 和自动递增的 $user_id 组成，并且 b) 返回新的数据库条目及其 ID 号，并在 HTML 中显示它们，无需刷新页面。

计划是使用 jQuery .on("click"...) 获取两个名称字段中的数据，并触发 php 文件 add-user.inc.php 插入这些数据，保留 $user_id 的值为 NULL，因此它自动递增:

$(document).on("click", ".insert", function(){
    var firstname = $('input.newdata[name="firstname"]').val();
    var lastname = $('input.newdata[name="lastname"]').val();
    $.ajax({ // begin insert ajax
        url: "php-includes/add-user.inc.php",
        type: "GET",
        data: { // begin insert data
            'firstname': firstname,
            'lastname': lastname
        }, // end insert data            
    }); // end insert ajax
// closing }); comes later

然后，在单击事件中，以便浏览器可以正确识别新插入的行，以便在不刷新页面的情况下进行进一步的数据操作，以使用另一个 AJAX 调用来检索此新插入的记录的 id 值:

    $.ajax({ // begin retrieve ajax
        url: "php-includes/retrieve-user_id.inc.php",
        data: "",
        datatype: "application/json",
        type: 'get',
        success: function(data) {
           var user_id = data;

            // declare var newrecord which is a table row containing
            // <tr> with the variable user_id as its ID
            // and <td>s containing inputs containing the newly inserted data

           $('table tr:last').before(newrecord); // .. and insert this into the table
        },  // end retrieve data
    }); // end retrieve ajax
});

add-user.inc.php:

// connect to db

$firstname = $_GET['firstname'];
$lastname = $_GET['lastname'];

$insert_user_sql = "INSERT INTO `table` (user_id, firstname, lastname)
    VALUES (NULL,'$firstname','$lastname')";

$result = $db->query($insert_user_sql);

检索-user_id.inc.php

// connect to db

$retrieve_user_sql = "SELECT `user_id` from `table` ORDER BY `user_id` DESC LIMIT 1";
$retrieve_user_result = $db->query($retrieve_user_sql);
$retrieve_user_num_rows= $retrieve_user_result->num_rows;


if ($retrieve_user_num_rows > 0) { 
    while ($row = $retrieve_user_result->fetch_object()) {
        $user_id = $row->user_id;
        $result = ($user_id + 1);
    }
} else {
    $result = 1;
}

 echo $result;

插入到 HTML 中的 user_id 数字间歇性错误，有时会增加 2 而不是 1，有时不会增加，导致两个表行具有相同的 ID，直到刷新页面并通过纯 PHP 检索到正确的 ID 号。如果输入多条记录而在插入之间没有进行页面刷新，这会导致问题，因为单个 ID 可能针对多个行。

如果在每次插入之间执行页面刷新，则没有问题。

有什么想法吗？提前致谢。

Answer 1

您不应使用 GET 来插入数据 - GET 调用应该是幂等的。

您应该发出一个 POST 请求，该请求将返回响应中最后插入的 id，然后您在 ajax 请求的回调中使用该值:

$(document).on("click", ".insert", function(){
    var firstname = $('input.newdata[name="firstname"]').val();
    var lastname = $('input.newdata[name="lastname"]').val();
    $.ajax({ // begin insert ajax
        url: "php-includes/add-user.inc.php",
        type: "POST",
        data: { // begin insert data
            'firstname': firstname,
            'lastname': lastname
        },
        success: function(response){

          // do your stuff here with the retrieved id

        }
    }); // end insert ajax
// closing }); comes later

注意添加的success 处理程序。