2回目のクリックの後にデータベースからデータをダウンロード

Aleksf：

なぜデータは、第2のクリック後に表示されますか？

たぶん私は正しく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);
};

jeprubio：

事は、両方の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("");
    });
});