执行AJAX请求后未应用CSS

在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 ""; echo ""; echo ""; echo ""; echo ""; echo ""; while($row = mysqli_fetch_assoc($res)) { echo ""; echo ""; echo ""; echo ""; echo ""; } echo "
User
Available Functions
" . $row['User'] . "
Delete User
Change Password
"; echo ""; } 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”的div中，并通过innerHTLM填充。

以防这里也是我的AJAX命令：

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

有人可以帮忙吗？

谢谢…

Answer 1

您可以在按钮中添加ID。 例如：-

 echo "Delete User"; echo "Change Password"; 

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

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

这使我能够正确地解决这些问题。 感谢你的所有答案和埃里克，他删除了他的答案，但让我走上正轨。

问候