如何在從Ajax執行的PHP文件中執行JavaScript

Question

我之前發布了此內容，但錯誤地將其標記為可以使用innerHTML插入腳本的重復項嗎？ ，這不是我的問題。 我沒有嘗試通過使用innerHTML運行任何JavaScript，而是試圖運行位於通過Ajax / XmlHttp調用的PHP文件中的JavaScript。 我在那個JS中使用innerHTML ，但是我沒有在其中編寫更多的JS。 因此，它不是該問題的重復，我現在再次嘗試。

不知道這是怎么回事。 我將首先解釋文件的組織，然后進入代碼。

應用程序-允許用戶選擇不同的屬性（即年份或名稱）並從數據庫中查看匹配結果的圖片。

文件-我有一個gallery.php文件，該文件具有一系列HTML表單元素，用作從數據庫中獲取過濾結果的選擇器。 每當設置或更改選擇器時，文件都會向使用Ajax刷新get.php文件的新請求發送結果，而無需加載新頁面。 一切都很好。 我的下一個任務是實現一個模式部分，在其中可以單擊圖像並查看打算使用JavaScript和CSS進行處理的較大版本，但是我的中間目標是只更改get.php結果底部的一些文本get.php第一步，再次使用JavaScript編寫get.php 。 但是我似乎無法啟動任何用get.php編寫的JavaScript。

碼-

這是gallery.php ：

 <?php include_once("./../php/navbar.php"); ?> <html> <head> <link href="/css/siteTheme.css" rel="stylesheet"> <style> .attributes span { margin-right: 1rem; } </style> <script> function changeParams() { if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("test").innerHTML = this.responseText; } }; year = document.getElementById("years_select").value; nameFirst= document.getElementById("nameFirst_select").value; /* Ton of other getElementById statements here that I'm excluding to keep things shorter */ url = "get.php?year="+year+......; xmlhttp.open("GET", url, true); xmlhttp.send(); } /* End function */ </script> </head> <body> <div class="content"> <h1>Gallery</h1> <form>Details: <!-- -------------------- Year -------------------- --> <select onchange="changeParams()" name="years" id="years_select"> <option value="All">Year</option> <?php include("/var/www/admin.php"); $conn = mysqli_connect($dbServername, $publicdbUsername, $publicdbPass, $dbName); if (!$conn) { die('Could not connect: ' . mysqli_error($conn)); } $sql = "select year from db group by year order by year desc"; $result = mysqli_query($conn, $sql); while ($row = mysqli_fetch_array($result)) { echo "<option value=" . $row['year'] . ">" . $row['year'] . "</option>"; } mysqli_close($conn); ?> </select> <!-- A bunch of other selectors are created here following the same pattern as above of getting results from a DB --> <!-- -------------------- Searchbar -------------------- --> <input type="text" size="50" onkeyup="changeParams()" name="search" id="search" placeholder="Search"></input> </form> <div id="test">Choose some filters to see some results!</div> </form> </div> <!-- Ends content div --> </body> </html>

這是get.php ：

 <html> <head> <style> /* Bunch of CSS that's not relevant here */ </style> <script type="text/javascript"> console.log("....."); var parts = document.querySelectorAll("div.imgContainer"); console.log("Found something:", parts); parts.addEventListener("click", function(){ document.getElementById("anID").innerHTML = "Test..."; }); </script> </head> <body> <?php include("/var/www/admin.php"); $year = $_GET['year']; //Bunch of other variables set here following the same logic, getting data from gallery.php $conn = mysqli_connect($dbServername, $publicdbUsername, $publicdbPass, $dbName); if (!$conn) { die('Could not connect: ' . mysqli_error($conn)); echo '$conn'; } $sql = 'select * db'; /* ---------- Creating SQL statement ---------- */ $clauses = 0; if ($year != "All") { if ($clauses == 0) { $sql = $sql . ' where year = "' . $year . '" and'; $clauses = $clauses + 1; } else { $sql = $sql . ' year = "' . $year . '" and'; } } /* Bunch of other if statements to get set information and add to sql statement as such */ // Need to chop of the last ' and' from the sql statement $sql = substr($sql, 0, -4); $sql = $sql . ' order by year desc'; $result = mysqli_query($conn, $sql); $num_results = mysqli_num_rows($result); if ($num_results == 0 or $clauses == 0) { echo "<p>No matches to your query. Try refining your search terms to get some results.</p>"; } else { echo "<p>" . $num_results . " results matched your query.</p>"; echo "<div class=results>"; //echo "<div>"; echo '<script type="text/javascript"> function modalFunction() { document.getElementById("anID").innerHTML = "test"; } </script>'; while ($row = mysqli_fetch_array($result)) { $pic = $row['pathToPic']; $wwwImg = substr($pic, 13); //echo "<span id=aCard><img src=" . $wwwImg . " height ='250px'>"; //echo "<span class=text>" . $row['fullCardInfo'] . "</span></span>"; echo "<div class=fullContainer><div class='imgContainer'><img class=image src=" . $wwwImg ."></div><p class=text>" . $row['fullInfo'] . "</p></div>"; } // End while of results echo "</div>";// End results div//</div>"; //echo '<div class="modal"><p id="anID"></p></div>'; } // End else of "if results" mysqli_close($conn); ?> <script> </script> <div> <p id="anID">This in a div</p> </div> <!--<span> <p id="anID">This in a span</p> </span>--> </body> </html>

很抱歉，如果那是一團糟，我砍掉了一堆只是獲取/選擇/過濾一些數據的東西。 所有有效的方法和其中保留的所有變量都在我的完整代碼中設置。

但是我遇到的問題是在get.php編寫JavaScript來更改<p id="anID">標記中的文本。 我已經在get.php的幾個不同區域中嘗試過JS，從<head>標記中開始，到在PHP的<script>標記中回顯它，再到PHP語句完成后再到純<script>標記中（我認為我把它們留在幾個不同的地方）。

問題是我所做的任何事情都無法更改我引用的<p>標記中的文本。 此外， get.php頭文件中的console.log語句似乎也沒有被調用。 無論我將它們放在get.php中的什么位置，它們都不會觸發。 Console.log在gallery.php中可以正常工作，所以我的瀏覽器或其他任何東西都沒有問題。

從長遠來看，當單擊圖像時，我將添加JS查詢選擇器以顯示更大的圖像，但是目前，我只是試圖在get.php中使任何JavaScript正常工作，而我正get.php而努力。 我看不到這是建議重復的重復方式，因為我不是在這里嘗試通過innerHTML運行JavaScript。

Answer 1

從頭開始，它實際上是在嘗試通過innerHTML傳遞JavaScript，因為get.php的信息來自gallery.php這一部分：

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("test").innerHTML = this.responseText;
        console.log("Response: ", this.responseText);
    }

所以看來，這畢竟是我鏈接的問題的重復。 道歉。 但是，對於該問題並沒有很好的答案，因此任何提示將不勝感激。

Answer 2

這行：

document.getElementById("test").innerHTML = this.responseText;

只是要將this.responseText的內容添加到元素test 。 我敢肯定您了解得很多，但是您要做的完全是錯誤的。 get.php輸出中的腳本將完全不會執行，並且通過包含第二個<html><head>以及更多內容，您也損壞了HTML。

更好的方法是，如果get.php從您的數據庫查詢返回的數據作為JSON字符串，如下所示：

$data;
while ($row = mysqli_fetch_array($result)) {
    $data[]['pic'] = $row['pathToPic'];
    $data[]['wwwImg'] = substr($row['pathToPic'], 13);
}
echo json_encode($data);
exit;

然后回到gallery.php您可以執行以下操作：

if (this.readyState == 4 && this.status == 200) {
    formatResult(this.responseText);
}

// ... snip ...

function confirmJson(str) {
    var j = null;
    if (str) {
        try { j = JSON.parse(str); } 
        catch (e) { j = null; }
    }
    return j;
}
function formatResult(str) {
    var data = confirmJson(str);
    if (! data) {
        console.log("result is not JSON");
        return;
    }
    // do stuff with the data
    var i, max = data.length;
    var h = document.createElement("div");
    var img;
    for(i=0;i<max;i++) {
        img = document.createElement("src");
        img.src = data[i].wwwImg;
        img.addEventListener("click",function(){ alert("pic:["+ data[i].pic +"]"); },true);
        h.appendChild(img);
    }
    document.getElementById("test").innerHTML = h;
}

如何在從Ajax執行的PHP文件中執行JavaScript

問題描述

2 個解決方案

解決方案1
0 2018-12-08 04:03:50

解決方案2
0 2018-12-08 04:33:33

如何在從Ajax執行的PHP文件中執行JavaScript

問題描述

2 個解決方案

解決方案1 0 2018-12-08 04:03:50

解決方案2 0 2018-12-08 04:33:33

解決方案1
0 2018-12-08 04:03:50

解決方案2
0 2018-12-08 04:33:33