执行 AJAX 请求后未应用 CSS

Question

我在 AJAX 请求后遇到了一个问题。我正在从数据库中请求数据。它本身完美运行，我处理数据并将其添加到 PHP 文件中的表中。该表由后跟数据的标题组成。然后将该表传送到显示它的主页。我的问题是我正在尝试格式化我在 PHP 中创建的按钮也被格式化。这是带有数据请求的 PHP

    if (mysqli_connect_errno()) {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    $sql = "SELECT LoginName FROM table";

    $res = mysqli_query($conn, $sql);

    if (mysqli_num_rows($res) > 0) {

        echo "<center>";
        echo "<table border='1'>";
        echo "<tr>";
        echo "<td>User</td>";
        echo "<td colspan=2 align=center>Available Functions</td>";
        echo "</tr>";

        while($row = mysqli_fetch_assoc($res)) {
            echo "<tr>";
            echo "<td>" . $row['User'] . "</td>";
            echo "<td><button type='button' class='smallbutton'>Delete User</button></td>";
            echo "<td><button type='button' class='smallbutton'>Change Password</button></td>";
            echo "</tr>";
        }
        echo "</table>";
        echo "</center>";
    } else {
        echo "";
    }

    mysqli_close($conn);

如您所见，我为按钮分配了一个类。我认为将其用作 CSS 的格式化标签很容易。我的 css 文件如下所示：

.smallbutton {
font-size:16px;
padding: 10px 10px;
border: none;
background-color: #008CBA;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
color: white; }

每次执行代码时，在页面刷新时，都会创建表格，但按钮看起来像那些丑陋的标准按钮，并且没有应用 CSS。我能够将样式包含到 PHP 文件中，然后该文件可以工作，但这确实不是我想要构建页面的方式。 PHP 实际上只是数据提供者，我想在布局的中心位置使用 CSS。

我已经为其他按钮使用了相同的 CSS，只是使用了另一个类名，无论它们位于页面上的哪个位置，它们都能完美地工作。我创建的表中只有这些，不想工作。

表格嵌入在 ID 为“DbInfo”并通过 innerHTLM 填充的 div 中。

以防万一这也是我的 AJAX 命令：

$(document).ready(function(){
$.ajax({
    method: "POST",
    url: "UserData.php",
    success: function(data){
        $("#DbInfo").innerHTML = data;
    }
});  });

有人可以帮忙吗？

谢谢...

Answer 1

只要有人感兴趣。我重组了我的 CSS 并有明确的参考。我还添加了按钮类型，而不是只处理类。新的 CSS 如下所示：

button[type=button].abutton {
    font-size:16px;
    padding: 15px 15px;
    border: none;
    background-color: #008CBA;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
    color: white;
}

button[type=button].smallbutton {
    font-size:16px;
    padding: 10px 10px;
    border: none;
    background-color: #008CBA;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
    color: white;
}

这使我能够正确处理这些项目。感谢您的所有答案和 Eric，他删除了他的答案，但让我走上了正轨。

问候

Answer 2

您可以将 id 添加到您的按钮。 例如：-

echo "<td><button type='button' class='button'>Delete User</button></td>";
echo "<td><button type='button' class='button'>Change Password</button></td>";

在 AJAX 中设置 innerHTML 后，从客户端设置 css 类。 例如：-

$(document).ready(function(){

$.ajax({
    method: "POST",

    url: "UserData.php",

    success: function(data){

        $("#DbInfo").innerHTML = data;

        $(".button").addClass("smallbutton");

    }

});  
});

注意：- 通过 AJAX 从服务器端获取所有 HTML 代码是一种不好的做法。尝试仅通过 AJAX 从您的服务器获取数据并在客户端构建您的 HTML 表。

例如;- php代码

if (mysqli_connect_errno()) {
    return;
}

$sql = "SELECT LoginName FROM table";

$res = mysqli_query($conn, $sql);
$data = array();
if (mysqli_num_rows($res) > 0) {
    while($row = mysqli_fetch_assoc($res)) {
       array_push($data, $row['User']);
    }
}

mysqli_close($conn);
echo json_encode($data);

jquery 代码

$(document).ready(function(){
$.ajax({
    method: "POST",
    url: "UserData.php",
    success: function(data){
        var userData = JSON.parse(data);
//contruct HTML table using jquery here
    }
});