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

Posted 2023-02-21

【中文标题】使用 AJAX 在我的 HTML 文档中获取 PHP 文件，但其中的脚本不起作用

【英文标题】：Using AJAX to GET a PHP file in my HTML document, but the scripts inside it aren't working

【发布时间】：2021-09-29 08:53:35

【问题描述】：

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

我附上了我的 PHP 代码，以及下面的屏幕截图。

trial.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>

我得到以下观点：

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

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

【问题讨论】：

对我来说看起来一样，除了背景颜色不同，可能是possible in pure CSS。无论如何，比较渲染的 DOM

AJAX 的返回包含设置 CSS（背景颜色/颜色/不透明度）的 javascript，但请注意，ajax 本身的返回不会被执行/渲染。因此，请在完成父脚本中的 ajax 后重新渲染。正常的渲染方法是把它们放在http.onreadystatechange (http.readyState == 4 && http.status == 200)

是的，人为此使用 css。 .some-class:nth-child(odd), .some-class:nth-child(even)

最好为 n%2 元素编写一个 css 类并应用 css。

【参考方案1】：

来自MDN reference

HTML5 规定不应执行插入有 innerHTML 的

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