时间戳

首页 > 解决方案 > 使用 AJAX 在我的 HTML 文档中获取 PHP 文件，但其中的脚本不起作用

javascript - 使用 AJAX 在我的 HTML 文档中获取 PHP 文件，但其中的脚本不起作用

问题描述

我正在使用AJAX在我的 HTML 文档中调用一个php文件，它也可以正常工作。问题是，PHP 文件中的脚本标签很少，如果单独查看 PHP 文件，它就可以正常工作。但是当我使用 AJAX 调用它时，这些脚本不起作用。

我附上了我的 PHP 代码和下面的屏幕截图。

试用版.php

<script>
document.getElementById("response1").onload = function() {
    document.body.style.backgroundColor = "#ffa31a";
}

</script>

<h1 class="restitle"> Responses</h1>

<?php

    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "portfolio";

    $conn = mysqli_connect( $servername, $username, $password, $dbname );

    if ( !$conn ) {
        die( "Connection failed: " . mysqli_connect_error() );
    }

    $sql = "SELECT NAME, EMAIL, MESSAGE, TIME FROM Feedback ORDER BY TIME";
    $result=$conn->query( $sql );

    if ( $result == TRUE ) {
        $i=0;
?>

<script>
    var n = 1;
</script>

<?php
        
    while ($row = $result -> fetch_row()) {
        $i = $i+1;
      
        echo "<div class='response' id='response$i'><h1 class='responsetitle' id='responsetitle$i'><i class='fa fa-user' aria-hidden='true'></i> " . $row[0]. " <span class='responseemail' id='responseemail$i'> (". $row[1] .")</h1><hr class='responseline'><p class='responsetxt' id='responsetxt$i'>\"" . $row[2] . "\"</p><br /><div class='responsetimecontain'><span class='responsetime'>- " . $row[3] . "</span></div></div>";
      
        echo "<div id='valuepipe$i' style='display:none;'>" . $i . "</div>";
      
?>

<script>
    var i = document.getElementById("valuepipe" + n).textContent;
    if (i % 2 == 0) {
        document.getElementById("response" + n).style.backgroundColor = "#ffa31a";
        document.getElementById("responseemail" + n).style.color = "#f2f2f2";
        document.getElementById("responseemail" + n).style.opacity = "0.6";

        document.getElementById("responsetitle" + n).childNodes[0].style.color = "#f2f2f2";
        document.getElementById("responsetxt" + n).style.color = "#f2f2f2";
    }
    n++;
</script>

<?php
        }
    $result -> free_result();
    }
else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

mysqli_close( $conn );

?>

单独查看此文件时：

直接打开时

但是当我使用 AJAX 调用它时：

<script>
    var xhttp = new XMLHttpRequest();
    xhttp.onload = function() {
        document.getElementById("main2").innerHTML = this.responseText;
    }
    xhttp.open("GET", "trial.php");
    xhttp.send();

</script>

我得到以下观点：

使用 AJAX 调用

不知何故，所有的脚本标签都被忽略了。需要一个解决方案。任何帮助，将不胜感激。

注意：其他样式在我的 CSS 文件中实现，因此它们是可见的。只有脚本不起作用

标签： javascriptphphtmlajaxdom

解决方案

来自MDN 参考

HTML5 规定不应执行插入有 innerHTML 的 <script> 标记。

您需要将脚本与 HTML 内容分开，或者将它们作为加载内容的代码的一部分包含在内，或者将它们放在单独加载的自己的脚本文件中。

推荐阅读