执行 AJAX 请求后未应用 CSS

Posted 2023-02-24

【中文标题】执行 AJAX 请求后未应用 CSS

【英文标题】：CSS not applied after executing AJAX request

【发布时间】：2018-05-12 16:19:30

【问题描述】：

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

有人可以帮忙吗？

谢谢...

【问题讨论】：

使用$("#DbInfo").html( data );时发生了什么？

你的css在哪里

您的浏览器控制台是否在您的 css 样式表上抛出 404？

感谢大家的反馈。我想从上到下回答。当我使用 html(data) 时，这是同样的问题。 CSS 位于同一目录中，名为 style.css。它是通过标准过程 实现的。不，我的样式表上没有 404。

【参考方案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，他删除了他的答案，但让我走上了正轨。

问候

【参考方案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
    
);

【讨论】：

答案已编辑。这里的问题是，如果您直接设置 innerHTML，浏览器将不会扫描您的 HTML 内容并应用样式。您需要以某种方式明确指定您的样式。以前在我的回答中，我通过 id 添加了类。现在在我的回答中，我通过不同的 css 类添加了 css 类。

先生，我也在使用 ajax，我在 ajax 中实现的名为 function 的类都工作正常......

@GyandeepSharma 抱歉，我认为这是问题所在。这个问题是因为找不到 css 类吗？

但无论如何，通过 AJAX 从服务器端获取所有 HTML 代码是一种不好的做法。只通过AJAX从服务器获取数据并在客户端构建HTML表格是正确的方法吗？

我对此不太了解...抱歉。