Question

<?php
    session_start();
    if(!$_SESSION['Admin']) {
    header('Location: login.php'); exit();
    }
    ?>
    <!DOCTYPE HTML>
    <html>
    <head>
        <title> ticketExpress | Admin </title>
        <link rel='stylesheet' href='../assets/css/style.css'> 
    </head>
    <body>
    <div id='containerAdmin'>
    <h1> <img class='logo' src='../assets/images/logo.png' width='200' height='43'> </h1> <a href='?logout' class='logout'> Logout </a>
    <h3> Open Tickets </h3>
    <hr />
    <?php
    require("../configuration/config.php");
    $GetTickets = $con->query("SELECT * FROM tickets WHERE open='true'");
    while($TicketInfo = $GetTickets->fetch_object()) {
    $Subject = $TicketInfo->Subject;
    echo "<div id='ticket'>".$Subject ."<a href='?delete=$TicketInfo->ID'><img style='float:right'src='../assets/images/delete.png' width='15px' height='15px'></a><a style='float:right; color:red; text-decoration:none; margin-right:10px;' href='?close=$TicketInfo->ID'> Close </a><font style='float:right; margin-right:10px;  color:green;' id='responseMsg'> </font></div>";
    }
    if(isset($_GET['delete'])) {
    $ID = $_GET['delete'];
    echo "
    <script type='text/javascript'>
        var ajax = new XMLHttpRequest();
        ajax.open('POST','delete.php', true);
        ajax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        ajax.onreadystatechange = function () {
            if(ajax.readyState == 4 && ajax.status == 200) {
                document.getElementById('responseMsg').innerHTML = ajax.responseText;
            }
            }
            ajax.send('delete=$ID');
        </script>
        ";
    }
    if(isset($_GET['logout'])) {
    session_destroy();
    header('Location: login.php');
    }
    if(isset($_GET['close'])) {
    $ID = $_GET['close'];
    echo "
    <script type='text/javascript'>
        var ajax = new XMLHttpRequest();
        ajax.open('POST','close.php', true);
        ajax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        ajax.onreadystatechange = function () {
            if(ajax.readyState == 4 && ajax.status == 200) {
                document.getElementById('responseMsg').innerHTML = ajax.responseText;
            } 
            }
            ajax.send('close=$ID');
        </script>
        ";
    }
    ?>
    <br />
    </div>
    </body>
    </html>

我的问题是每当我点击删除时，ajax响应总是出现在页面上的第一张票据旁边（最上面一张）

例如，如果我单击故障单21旁边的“关闭”，则AJAX响应“Ticket Succesfully Closed”将始终显示在页面上的第一张故障单旁边（例如，故障单1）

这是close.php

<?php
require('../configuration/config.php');
if(isset($_POST['close'])) {
echo "Ticket Successfully Closed";
$TID = $_POST['close'];
$con->query("UPDATE tickets SET open='false' WHERE ID='$TID'");
}

并删除.php

<?php
require('../configuration/config.php');
if(isset($_POST['delete'])) {
echo "Ticket Deleted";
$TID = $_POST['delete'];
$con->query("DELETE FROM tickets WHERE ID='$TID'");
}

所有答案一如既往地受到赞赏！提前谢谢

Answer 1

您的问题出现在while语句中，您在主页上显示打开的票证。

<font style='float:right; margin-right:10px;  color:green;' id='responseMsg'> </font>

首先，不推荐使用<font>标记。请改用其他<div>。其次，这里发生的是每个故障单旁边都有一个id='responseMsg'的元素。当要求JavaScript查找ID为responseMsg的元素时，因为有倍数，始终转向DOM中的第一个。

要解决此问题，您需要使用您在数据库中提供票证的ID。尝试这样的事情：

while ($TicketInfo = $GetTickets->fetch_object()) {
    $Subject = $TicketInfo->Subject;
    $ID = $TicketInfo->ID;
    echo "<div class='ticket' id='ticket" . $ID . "'>" . $Subject . "...";
    // Later in the ticket...
    echo "<div class='ticketResponse' id='responseMsg" . $ID . "'> </div>";
}

这样您就可以使用<div id='ticket1' ... >和<div id='ticket2' ... >表示的票证，依此类推。

我注意到您使用<div id='ticket'>来表示每个故障单对象。同样，这不是有效的HTML。您应该为要使用的故障单定义CSS类，然后使用<div class='ticket' ... >括起每个故障单。

反正。完成这些更改后，您需要更改close.php和delete.php的回复，以便他们指出已关闭或删除的故障单的ID。然后，您的主页上的AJAX需要解析此响应并使用已解析的票证ID将消息放在相应的票证旁边。

将close.php更改为以下内容：

if(isset($_POST['close'])) {
    $TID = $con->real_escape_string($_POST['close']);
    $success = $con->query("UPDATE tickets SET open='false' WHERE ID='$TID'");
    if ($success) {
        echo $TID . "|Ticket Successfully Closed";
    }
    else {
        echo $TID . "|Ticket could not be closed.";
    }
}

为delete.php做类似的事情。请注意，您需要在执行查询后发送响应，因为如果查询不起作用该怎么办？

最后，为你的AJAX ......

ajax.onreadystatechange = function () { if(ajax.readyState == 4 && ajax.status == 200) { var response = ajax.responseText.split('|'), id = response[0], text = response[1]; document.getElementById('responseMsg' + id).innerHTML = text; } } ajax.send('delete=$ID');

基本上，您将close.php和delete.php以ID|MESSAGE格式发送回复。然后你的AJAX函数获取数据，用|字符拆分它，并相应地使用不同的部分。

最后，请注意我在close.php文件中使用mysqli::real_escape_string()。这修复了Jeff评论的安全漏洞。 您永远不希望将用户提供的数据直接放入数据库查询中。这使您容易受到SQL injection attacks的攻击。</ p>
希望这有帮助！

AJAX响应文本显示

1 个答案: