Загрузить данные из базы данных после второго клика

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

подключение данных. 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 вызов выполняется асинхронно c, поэтому даже вызов 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("");
    });
});