从ajax响应中获取html中的未定义

Question

（抱歉拼写错误） 大家好 希望您度过愉快的时光。 我第一次使用ajax，并尝试通过ajax向html添加一些元素（发送和接收的消息），但我得到的只是html中未定义的文本。

messageInsert 和第一个 ajax 工作正常，但从 get_msg 中我得到一个 sql 语法错误：

致命错误：未捕获 mysqli_sql_exception：您的 SQL 语法有错误；检查与您的 MariaDB 服务器版本相对应的手册，了解在 C:\xampp\htdocs\project\myProjects\ 中第 1 行的 'ANDcoming_id = ) OR (outgoing_id = ANDcoming_id = ) ORDER BY msg_id DESC' 附近使用的正确语法Chatbot\php\get_msg.php:9 堆栈跟踪: #0 C:\xampp\htdocs\project\myProjects\Chatbot\php\get_msg.php(9): mysqli->query('SELECT * FROM m...' ) #1 {main} 在第 9 行的 C:\xampp\htdocs\project\myProjects\Chatbot\php\get_msg.php 中抛出

messageInsert.php：

<?php
    session_start();
    require_once 'connection.php';
    if (isset($_SESSION['userID'])) {
        $outgoing_id = mysqli_real_escape_string(connection() , $_POST['outgoing_id']);
        $incoming_id = mysqli_real_escape_string(connection() , $_POST['incoming_id']);
        $message = mysqli_real_escape_string(connection() , $_POST['message']);
        if (!empty($message)) {
            $query = "INSERT INTO messages (outgoing_id, incoming_id, msg) VALUES ($outgoing_id , $incoming_id , '$message')";
            $result =connection()->query($query);
        }
    }

get_msg.php：

<?php
    session_start();
    require_once 'connection.php';
    if (isset($_SESSION['userID'])) {
        $outgoing_id = mysqli_real_escape_string(connection() , $_POST['outgoing_id']);
        $incoming_id = mysqli_real_escape_string(connection() , $_POST['incoming_id']);
        $output = "";
        $query = "SELECT * FROM messages WHERE (outgoing_id = {$outgoing_id} AND incoming_id = {$incoming_id}) OR (outgoing_id = {$incoming_id} AND incoming_id = {$outgoing_id}) ORDER BY msg_id DESC";
        $result = connection()->query($query);
        while ($row = mysqli_fetch_assoc($result)) {
            if ($outgoing_id === $row['outgoing_id']) {
                $output ='<div class="message-send my-4">
                               <p>'.$row['msg'].'</p>
                           </div>';
            } else {
                $output = '<div class="message-receive">
                                <img class="message-receive-pic mb-3 me-2" src="style/ProfilePic/'.$_SESSION['userPic'].'" alt="">
                                <div class="message-receive-text-box my-4">
                                    <p> '. $row['msg']  .'</p>
                                </div>
                           </div>';
            }
            echo $output;
        }
    }

我的阿贾克斯：

let form = document.querySelector(".mySend"),
    sendInput = form.querySelector(".message"),
    sendBtn = form.querySelector(".sendBtn"),
    chatBox = document.querySelector(".chat-box");
form.onsubmit = (e)=> {
    e.preventDefault();
}
sendBtn.onclick = ()=> {
    let xhr = new XMLHttpRequest();
    xhr.open("POST" , "http://localhost/project/myProjects/Chatbot/php/messageInsert.php" , true);
    xhr.onreadystatechange = ()=> {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200){
                sendInput.value = "";
            }
        }
    }
    let formData = new FormData(form);
    xhr.send(formData);
}
setInterval(()=> {
    let xhr = new XMLHttpRequest();
    let data = "";
    xhr.open("POST" , "php/get_msg.php" , true);
    xhr.onload = ()=> {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                data = this.response;
                chatBox.innerHTML = data;
            }
        }
    }
    let formData = new FormData(form);
    xhr.send(formData);
}, 500);

我的html：

<div class="chat-box">

    </div>
    <div class="type-box">
        <form class="mySend" method="post" autocomplete="off">
            <input type="hidden" value="<?php echo $userProfile['id'] ?>" name="incoming_id">
            <input type="hidden" value="<?php echo $_SESSION["profileID"] ?>" name="outgoing_id">
            <input class="message form-control" type="text" placeholder="Type your message here..." name="message">
            <button type="submit" class=" sendBtn btn btn-dark" name="sendBtn"><i class="fab fa-telegram-plane"></i></button>
        </form>
    </div>

我确定表和列的名称。

非常感谢您的帮助:)

我已经尝试了ajax和php文件中的所有内容，但没有任何效果。

Answer 1

您的错误消息

致命错误：未捕获 mysqli_sql_exception：您的 SQL 语法有错误；检查与您的 MariaDB 服务器版本相对应的手册，了解在 C:\xampp\htdocs\project\myProjects\ 中第 1 行的 'ANDcoming_id = ) OR (outgoing_id = ANDcoming_id = ) ORDER BY msg_id DESC' 附近使用的正确语法Chatbot\php\get_msg.php:9 堆栈跟踪: #0 C:\xampp\htdocs\project\myProjects\Chatbot\php\get_msg.php(9): mysqli->query('SELECT * FROM m...' ) #1 {main} 在第 9 行的 C:\xampp\htdocs\project\myProjects\Chatbot\php\get_msg.php 中抛出

清楚地指出这一行是您遇到麻烦的地方（错误会在您尝试执行它的下一行抛出）：

$query = "SELECT * FROM messages WHERE (outgoing_id = {$outgoing_id} AND incoming_id = {$incoming_id}) OR (outgoing_id = {$incoming_id} AND incoming_id = {$outgoing_id}) ORDER BY msg_id DESC";

仔细查看错误信息的查询部分：

和传入_id = ) OR (传出_id = 和传入_id = ) 按 msg_id DESC 排序

您没有为

incoming_id

或

outgoing_id

设置值

这就是您尝试加载这些值的方式：

        $outgoing_id = mysqli_real_escape_string(connection() , $_POST['outgoing_id']);
        $incoming_id = mysqli_real_escape_string(connection() , $_POST['incoming_id']);

这清楚地表明您将空字符串作为它们的值（因为

$_POST['outgoing_id']

和

$_POST['incoming_id']

不会引发错误，您在 POST 请求中拥有这些键，尽管它们的值是空的。）

这些值在您的 HTML 中定义，即位于

            <input type="hidden" value="<?php echo $userProfile['id'] ?>" name="incoming_id">
            <input type="hidden" value="<?php echo $_SESSION["profileID"] ?>" name="outgoing_id">

考虑到它们最终都是空的，我们知道

$userProfile['id']

和

$_SESSION["profileID"]

是空的。您需要研究如何定义它们，并可能将

intval

包裹在它们周围，例如

$intOutgoing_id = intval($outgoing_id);
$intIncoming_id = intval($incoming_id);
$query = "SELECT * FROM messages WHERE (outgoing_id = {$intOutgoing_id} AND incoming_id = {$intIncoming_id}) OR (outgoing_id = {$intIncoming_id} AND incoming_id = {$intOutgoing_id}) ORDER BY msg_id DESC";

因此，即使它们是空字符串，它们也会被转换为 0，因此行为将是，如果为它们传递了无效值，则结果集中将有 0 条记录，而不是页面崩溃。