为何JQuery AJAX调用内容无法在PHP页面显示？

核心问题梳理 #

你当前的代码存在3个关键错误，导致AJAX获取的数据无法正常展示在opentask.php页面上：

1. opentask.php结构错误 #

你的opentask.php仅通过require_once引入calltask.php，但calltask.php是依赖POST参数的AJAX接口，页面加载时无POST数据，会直接输出空内容；同时页面缺少固定的#callsuccess容器，AJAX回调无法找到目标元素。

2. calltask.php输出逻辑错误 #

• 额外输出了$taskname，导致AJAX返回的数据包含冗余内容；
• 在循环中重复生成id="callsuccess"的div，违反HTML中id唯一的规则，且返回的是完整的HTML结构，与AJAX回调的赋值逻辑冲突。

3. JS回调方法错误 #

使用text()方法会将返回的HTML标签（如<br>）当作纯文本解析，无法正常展示换行效果；若页面原本无#callsuccess元素，选择器也无法定位目标。

修正后的代码实现 #

1. 重构opentask.php为完整HTML页面 #

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="CallTasks.JS"></script>
</head>
<body>
    <!-- 触发按钮，根据你的实际场景调整 -->
    <button id="display_tasks">显示任务</button>
    <!-- 固定的结果展示容器 -->
    <div id="callsuccess"></div>
</body>
</html>

2. 修正calltask.php的输出逻辑（同时修复SQL注入风险） #

<?php
require_once $_SERVER['DOCUMENT_ROOT'] . 'sessionnotfound.php';
require_once $_SERVER['DOCUMENT_ROOT'] . 'dbinfo.php';
$dbc = new mysqli($hn,$user,$pass,$db) or die("Unable to connect");

// 使用预处理语句防止SQL注入
$taskname = isset($_POST['mydata']) ? $_POST['mydata'] : '' ;
$datatablequery = "SELECT DISTINCT datatable,docid FROM tasks WHERE tskname = ?";
$stmt = $dbc->prepare($datatablequery);
$stmt->bind_param("s", $taskname);
$stmt->execute();
$result = $stmt->get_result();

$output = '';
while ($row = $result->fetch_assoc()) {
    $datatablerowresult = $row['datatable'];
    $docidrowresult = $row['docid'];
    $output .= $datatablerowresult . '<br>' . $docidrowresult . '<br>';
}

// 仅返回需要展示的内容
echo $output;
$stmt->close();
$dbc->close();
?>

3. 调整CallTasks.JS的回调方法 #

$(document).ready(function () {
    $("#display_tasks").click(function() {
        var name = $(this).text();
        var namecut = name.substr(0,name.indexOf(' |'));
        $.ajax({
            type: 'POST',
            url: 'calltask.php',
            data: {mydata : namecut},
            success:function(data) {
                alert(data);
                // 用html()解析返回的HTML标签
                $('#callsuccess').html(data);
            }
        });
    });
});

内容的提问来源于stack exchange，提问作者Samy