在第二次单击后从数据库下载数据。

Question

为什么在第二次单击后显示数据？

也许我没有正确地处理ajax请求。我希望将数据从数据库输出到页面，并在添加后进行更新。

你能找到问题出在哪里吗？

main.js

$(document).ready(function () {
    $(function () {
        $.ajax({
            url: 'dataconnect.php',
            type: "POST",
            success: function (data) {
                $(".rows").html(data);
            }
        });
    });


    $("button.btnSubmit").on("click", function () {
        let textsval = $(".inputs_text").val();
        let imgsval = $(".inputs_img").val();

        $.ajax({
            url: 'bdconnect.php',
            type: "POST",
            data: { textss: textsval, imgg: imgsval },
        })
            .done(function () {
                // $(".rows").append(result);
            });
        $(".inputs_text").val("");
        $(".inputs_img").val("");


        $(function () {
            $.ajax({
                url: 'dataconnect.php',
                type: "POST",
                success: function (data) {
                    $(".rows").html(data);
                }
            });
        });
    });
});

dataconnect.php

<?php
    require_once("bdconnect.php");

    $query = $db->query('SELECT * FROM `databd`.`infos`');
    while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
        echo "<p>" . $row['texts'] . "</p>";
    }
?>

bdconnect.php

<?php

$dbhost = "localhost";
$dbname = "databd";
$username = "root";
$userpass = "";
$charset = "utf8";
$options = [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION];

$data = [
    "textss" => trim($_POST["textss"]),
    "imgg" => trim($_POST["imgg"]),
];

$db = new PDO("mysql:host=$dbhost;dbname = $dbname;charset=$charset", $username, $userpass, $options);
if (!empty(trim($_POST["textss"])) && !empty(trim($_POST["imgg"]))) {
    $query = "INSERT INTO `databd`.`infos`(texts,img) VALUES (:textss, :imgg)";
    $statement = $db->prepare($query);
    $result = $statement->execute($data);
};

Answer 1

问题是，两个ajax调用同时进行，当完成dataconnect调用时，服务器中还没有数据。

ajax调用运行异步，因此即使是dataconnect调用也会在稍后的代码中编写，bdconnect调用尚未完成。直到执行done回调为止。

将dataconnect调用放在done回调中，您将看到添加任何内容后更新的数据。

为了改进代码，您可以定义一个函数：

function refreshData() {
    $.ajax({
        url: 'dataconnect.php',
        type: "POST",
        success: function (data) {
            $(".rows").html(data);
        }
    });
}

并使用$(refreshData)每次调用它，而不是重复所有代码，如在document.ready中。

整个javascript代码将是：

function refreshData() {
    $.ajax({
        url: 'dataconnect.php',
        type: "POST",
        success: function (data) {
            $(".rows").html(data);
        }
    });
}

$(document).ready(function () {
    $(refreshData);

    $("button.btnSubmit").on("click", function () {
        let textsval = $(".inputs_text").val();
        let imgsval = $(".inputs_img").val();

        $.ajax({
            url: 'bdconnect.php',
            type: "POST",
            data: { textss: textsval, imgg: imgsval },
        }).done(function () {
            $(refreshData);
        });
        $(".inputs_text").val("");
        $(".inputs_img").val("");
    });
});