php - 使用 AJAX 根据图像映射点击区域编辑 PHP 查询代码-6ren

php - 使用 AJAX 根据图像映射点击区域编辑 PHP 查询代码

转载作者：太空宇宙更新时间：2023-11-03 11:49:30

25

4

所以我的网站上有一个图像 map (带有 usemap 和区域)，当我单击特定区域时，我希望执行特定的 MySQL 查询。基本上它是一个表格，当点击图像 map 的特定区域时，应该在同一页面上显示不同的数据。认为我必须使用 jQuery 或 AJAX(我是这方面的初学者)。

这是图像映射:

<img id="harta" src="img/hartap.png" alt="testmap" usemap="#Map" />
<map name="Map" id="Map">
    <area class="area1" alt="area1" title="area1" href="#table" shape="poly" coords="898,3071,902,3553,1108,3561,1129,3419,1254,3419,1278,3273,1472,3261,1476,3100" />
    <area class="area2" alt="area2" title="area2" href="#table" shape="poly" coords="842,2759,846,3035,1896,3076,1917,2816,1345,2774" />
    <area class="area3" alt="area3" title="area3" href="#table" shape="poly" coords="942,2327,934,2752,1342,2764,1380,2333" />
</map>

下面是 PHP 代码部分:

<section id="table" class="row">
<?php

    require_once('config.php');

      $reg = "theclickedarea"; // THIS VARIABLE HAS TO BE MODIFIED DEPENDING ON THE CLICKED AREA

      $con = mysql_connect("$host", "$username", "$password") or die(mysql_error());
      $db = mysql_select_db("$db_name") or die(mysql_error());
      $sql=mysql_query("SELECT name, score FROM table WHERE game='".$reg."'") or die(mysql_error());
      $count=0;

    echo  '<table>
                <thead>
                  <tr>
                    <th>name</th>
                    <th>score</th>
                  </tr>
                </thead>
                <tbody>';
    while($row = mysql_fetch_array($sql))
    {
       $name=$row['name'];
       $score=$row['score'];

       echo 
           '<tr>
               <td>'.$name.'</td>
               <td>'.$score.'</td>
           </tr>';

       $count++;   
    }
    echo ' </tbody> </table>  ';

?>
</section>

最佳答案

您应该使用 jQuery 来执行此操作。首先，您应该绑定(bind)一个事件监听器以单击区域元素。然后获取它的值并使用 AJAX 将区域标题作为参数发送给 PHP 脚本的 GET 请求。 PHP 脚本将查询数据库并构建一个响应，然后您会将其提供给页面。

下面是jQuery添加事件监听器获取面积值调用PHP脚本。

<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.area').bind("click", function () {
                var area = $(this).attr('title');
                var response = getTable(area);

                $('#table-holder').html(response);

            });

                function getTable(area) {
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                var httpURL = "the_php_page.php?area=" + area;
                xhttp.open("GET", httpURL, false);
                xhttp.send();
                return xhttp.responseText;
            }
        });
    </script>

html 页面变成如下所示。请注意，我已将区域元素的类更改为同一类，因为我在 jQuery 中按类获取它们。

<img id="harta" src="img/No_Image_Available.png" alt="testmap" usemap="#Map" />
<map name="Map" id="Map">
        <area class="area" alt="area1" title="area1" href="#table" shape="poly" coords="898,3071,902,3553,1108,3561,1129,3419,1254,3419,1278,3273,1472,3261,1476,3100" />
        <area class="area" alt="area2" title="area2" href="#table" shape="poly" coords="842,2759,846,3035,1896,3076,1917,2816,1345,2774" />
        <area class="area" alt="area3" title="area3" href="#table" shape="poly" coords="942,2327,934,2752,1342,2764,1380,2333" />
</map>

<div id="table-holder"></div>

最后，作为一个单独文件的 PHP 变成了这样的:

<?php
require_once('config.php');

$reg = $_GET['area']; // THIS VARIABLE HAS TO BE MODIFIED DEPENDING ON THE CLICKED AREA

$con = mysql_connect("$host", "$username", "$password") or die(mysql_error());
$db = mysql_select_db("$db_name") or die(mysql_error());
$sql = mysql_query("SELECT name, score FROM table WHERE game='" . $reg . "'") or die(mysql_error());
$count = 0;

$response = '<table>
                <thead>
                  <tr>
                    <th>name</th>
                    <th>score</th>
                  </tr>
                </thead>
                <tbody>';
while ($row = mysql_fetch_array($sql)) {
    $name = $row['name'];
    $score = $row['score'];

    $response .= '<tr>
                        <td>' . $name . '</td>
                        <td>' . $score . '</td>
                     </tr>';

    $count++;
}
$response .= ' </tbody> </table>  ';
header('Content-type: text/plain');
exit($response);
?>

此外，考虑使用我的 mysqsli 进行 SQL 连接，因为 mysql 已被弃用。 http://php.net/manual/en/book.mysqli.php

希望这对您有所帮助。

关于php - 使用 AJAX 根据图像映射点击区域编辑 PHP 查询代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36399366/

25

4

0

文章推荐： c# - 如何避免 asp :Multiview to load all the views

文章推荐： php - 在提交时插入 MySQL 数据

文章推荐： android - 如何突出显示选定的 gridview 项目

文章推荐： python - 用同名的@property 覆盖基类属性

Mysql 查询 JOIN 查询
我有三张 table 。表 A 有选项名称(即颜色、尺寸)。表 B 有选项值名称(即蓝色、红色、黑色等)。表C通过将选项名称id和选项名称值id放在一起来建立关系。我的查询需要显示值和选项的名称，而
查询
在mysql中，如何计算一行中的非空单元格？我只想计算某些列之间的单元格，比如第 3-10 列之间的单元格。不是所有的列...同样，仅在该行中。最佳答案如果你想这样做，只能在 sql 中使用名称而
sql - 查询、 native 查询、命名查询和类型化查询之间的区别
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 7 年前。 Improve this ques
elasticsearch - 在Elasticsearch查询中没有为[查询]注册的[查询]
我正在为版本7.6进行Elasticsearch查询我的查询是这样的: { "query": { "bool": { "should": [ {
sql - 查询、 native 查询、命名查询和类型化查询之间的区别
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 7 年前。 Improve this ques
php - Mysql WHERE NOT EXISTS(查询)OR(查询)
是否可以编写一个查询来检查任一子查询(而不是一个子查询)是否正确？ SELECT * FROM employees e WHERE NOT EXISTS (
javascript - 查询。为表中的每一行发送 ajax 查询
我找到了很多关于我的问题的答案，但问题没有解决我有表格，有数据，例如: Data 1 Data 2 Data 3
salesforce - SOQL 查询 - 如何通过将字段设为小写并进行比较来编写 SOQL 查询？
以下查询返回错误: 查询: SELECT Id, FirstName, LastName, OwnerId, PersonEmail FROM Account WHERE lower(PersonEm
salesforce - SOQL 查询 - 如何通过将字段设为小写并进行比较来编写 SOQL 查询？
以下查询返回错误: 查询: SELECT Id, FirstName, LastName, OwnerId, PersonEmail FROM Account WHERE lower(PersonEm
Android SQLite 查询(我想解析一般的 SQL 查询)
我从 EditText 中获取了 String 值。以及提交查询的按钮。 String sql=editQuery.getText().toString();// SELECT * FROM empl
mysql 查询 - 为一个巨大的表优化现有的 MAX-MIN 查询
我有一个或多或少有效的查询(关于结果)，但处理大约需要 45 秒。这对于在 GUI 中呈现数据来说肯定太长了。所以我的需求是找到一个更快/更高效的查询(几毫秒左右会很好)我的数据表大约有 3000
SQL 查询 - 将 NULL 结果添加到 SELECT 查询
这是我第一次使用 Stack Overflow，所以我希望我以正确的方式提出这个问题。我有 2 个 SQL 查询，我正在尝试比较和识别缺失值，尽管我无法将 NULL 字段添加到第二个查询中以识别缺失
sql - 什么是动态 SQL 查询？何时需要使用动态 SQL 查询？
什么是动态 SQL 查询？何时需要使用动态 SQL 查询？我使用的是 SQL Server 2005。最佳答案这里有几篇文章: Introduction to Dynamic SQL Dynami
php - 在另一个 mysql 查询 while 循环中调用 mysql 查询
include "mysql.php"; $query= "SELECT ID,name,displayname,established,summary,searchlink,im
java - MySQL 查询 "select top 5"查询
我有一个查询要“转换”为 mysql。这是查询: select top 5 * from (select id, firstName, lastName, sum(fileSize) as To
c# - Entity Framework 查询 ToString 不会产生 SQL 查询
通过我的研究，我发现至少从 EF 4.1 开始，EF 查询上的 .ToString() 方法将返回要运行的 SQL。事实上，这对我来说非常有用，使用 Entity Framework 5 和 6。但
MySQL 查询(或 Doctrine 1.2 查询)- 从连接表和过滤器中获取最新项目
我在构造查询来执行以下操作时遇到问题: 按activity_type_id过滤联系人，仅显示最近事件具有所需activity_type_id或为NULL(无事件)的联系人表格结构如下: 一个联系人可
php - 如何在执行另一个 SQL 查询 x 分钟后执行一个 SQL 查询？
如何让我输入数据库的信息在输入数据 5 分钟后自行更新？假设我有一张 table : +--+--+-----+ |id|ip|count| +--+--+-----+ |
database - 如何在 N1QL 查询(Couchbase 查询)中使用 LENGTH() 字符串函数
我正在尝试搜索正好是 4 位数字的 ID，我知道我需要使用 LENGTH() 字符串函数，但找不到如何使用它的示例。我正在尝试以下(和其他变体)但它们不起作用。 SELECT max(car_id)
php - 将 SQL 查询 (+JOIN) 转换为 Symfony Propel 查询
我有一个在 mysql 上运行良好的 sql 查询(查询 + 连接): select sum(pa.price) from user u , purchase pu , pack pa where (

首页

博学

6Ren·AI

商城

php - 使用 AJAX 根据图像映射点击区域编辑 PHP 查询代码