无法弄清楚如何使用Ajax

时间:2018-12-08 00:47:29

标签: javascript php html ajax

不确定这是怎么回事。我将首先解释文件的组织,然后进入代码。

应用程序:允许用户选择不同的属性(即年份或名称),并从数据库中查看匹配结果的图片。

文件-我有一个gallery.php文件,其中包含一系列HTML表单元素,这些元素用作选择器以从数据库中获取过滤结果。每当设置或更改选择器时,文件都会向get.php文件发送新请求,该文件使用Ajax刷新结果而不加载新页面。一切都很好。我的下一个任务是实现一个模式部分,在其中可以单击图像并查看打算使用JavaScript和CSS进行放大的版本,但是我的中间目标是仅更改{{ 1}}再次使用JavaScript,只是第一步。但是我似乎无法启动任何用get.php编写的JavaScript。

代码-

这是get.php

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>中编写JavaScript来更改get.php标签中的文本。我已经在<p id="anID">的几个不同区域中尝试过JS,从get.php标记中开始,到在PHP的<head>标记中回显,再到纯<script>标记之后, PHP语句已完成(我想我将它们留在了几个不同的地方)。

问题是我所做的任何工作都无法更改我引用的<script>标记中的文本。此外,<p>标头中的console.log语句似乎也没有被调用。

从长远来看,我将添加JS查询选择器以在单击图像时显示更大的图像,但是现在我只是想在get.php中使任何JavaScript正常工作,而我正在努力这样做。我看不到这是建议重复的重复方式,因为我不是在这里尝试通过innerHTML运行JavaScript

0 个答案:

没有答案