AJAX响应文本显示

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>

My problem is that whenever I click delete, the ajax response always appears next to the first ticket on the page (the top one) 我的问题是，每当我单击删除时，ajax响应总是出现在页面上第一张票证的旁边（最上面的票证）

If I for example click "Close" next to ticket 21, the AJAX response "Ticket Succesfully Closed" will always appear next to the first ticket on the page (for example ticket 1) 例如，如果我单击故障单21旁边的“关闭”，则AJAX响应“故障单成功关闭”将始终显示在页面上第一张故障单的旁边（例如，故障单1）

Here is close.php 这是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'");
}

And delete.php 和delete.php

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

All answers are much appreciated as always! 一如既往地感谢所有答案！ thanks in advance 提前致谢

Answer 1

Your issue is in the while statement where you display the open tickets on the main page. 您的问题是在while语句中，您可以在主页上显示打开的凭单。

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

First of all, the <font> tag is deprecated. 首先，不推荐使用<font>标记。 Use another <div> instead. 请改用另一个<div> 。 Second, what's happening here is that every ticket has an element with id='responseMsg' next to it. 其次，这里发生的是每张票证旁边都有一个id='responseMsg'的元素。 When JavaScript is asked to find an element with an ID of responseMsg , since there are multiples, it always resorts to the first one in the DOM. 当要求JavaScript查找ID为responseMsg的元素时，由于存在多个，因此它总是求助于DOM中的第一个元素。

To fix this, you need to use the IDs that you've given the tickets in your database. 要解决此问题，您需要使用在数据库中提供票证的ID。 Try something like this: 尝试这样的事情：

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>";
}

This way you have tickets denoted by <div id='ticket1' ... > , and <div id='ticket2' ... > , and so on. 这样，您可以用<div id='ticket1' ... >和<div id='ticket2' ... > ，依此类推。

I notice that you used <div id='ticket'> to denote every ticket object. 我注意到您使用<div id='ticket'>表示每个票证对象。 Again, this isn't valid HTML. 同样，这不是有效的HTML。 You should define a CSS class for tickets to use, and then use <div class='ticket' ... > to enclose every ticket. 您应该为要使用的票证定义一个CSS类，然后使用<div class='ticket' ... >封装每张票证。

Anyway. 无论如何。 After those changes are made, you need to change your responses from close.php and delete.php so that they can indicate the ID of the ticket that was closed or deleted. 进行了这些更改之后，您需要从close.php和delete.php更改响应，以便它们可以指示已关闭或删除的票证的ID。 Then, your AJAX on your main page needs to parse this response and use the parsed ticket ID to put the message next to the appropriate ticket. 然后，主页上的AJAX需要解析此响应，并使用解析的票证ID将消息放在适当的票证旁边。

Change close.php to the following: 将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.";
    }
}

And do something similar for delete.php . 并对delete.php执行类似的delete.php 。 Notice that you need to send the response after the query is executed, because what if the query doesn't work? 请注意，您需要在查询执行后发送响应，因为如果查询不起作用怎么办？

Finally, for your AJAX... 最后，为您的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');

So basically, you'll have close.php and delete.php send a response in the format ID|MESSAGE . 因此，基本上，您将拥有close.php和delete.php以ID|MESSAGE格式发送响应。 Then your AJAX function takes the data, splits it by the | 然后，您的AJAX函数获取数据，并用|分割| character, and uses the different pieces accordingly. 角色，并相应地使用不同的片段。

And finally, note my use of mysqli::real_escape_string() in your close.php file. 最后，请注意我在close.php文件中对mysqli::real_escape_string()使用。 This fixes the security flaw that Jeff commented on. 这修复了Jeff评论的安全漏洞。 You never want to put data provided by the user directly into a database query. 您永远不想将用户提供的数据直接放入数据库查询中。 This makes you vulnerable to SQL injection attacks . 这使您容易受到SQL注入攻击的攻击。

Hope this helps! 希望这可以帮助！

AJAX响应文本显示

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-08-14 13:08:53

AJAX响应文本显示

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-08-14 13:08:53

解决方案1
0 已采纳 2013-08-14 13:08:53