Question

在AJAX请求之后，我正在努力解决问题。我正在从数据库中请求数据。这本身很有效，我处理数据并将其添加到PHP文件中的表中。该表包含一个标题，后跟数据。然后将该表传送到显示它的主页面。我的问题是我正在尝试格式化我在PHP中创建的按钮以进行格式化。这是带有数据请求的PHP

headers

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

    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。我能够将样式包含在PHP文件中然后工作，但这不是我想要构建我的页面的方式。 PHP实际上只是数据提供者，我想在布局的中心位置使用CSS。

我已经将相同的CSS用于其他按钮的其他类名称，无论它们位于页面的哪个位置，它们都能正常工作。就是我创建的那个表中的这些，不想工作。

该表嵌入一个div中，该div具有ID＆＃34; DbInfo＆＃34;并通过innerHTLM填充。

以防万一我的AJAX命令：

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

有人可以帮忙吗？

...谢谢

Answer 1

您可以在按钮中添加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表。

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

Answer 2

如果有人有兴趣的话。我重新构建了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，他删除了他的答案，但让我走上了正确的轨道。

问候

执行AJAX请求后未应用CSS

2 个答案: