Question

我在页面上有一个元素，当点击它时会向receiver.php文件发出ajax请求：

<script>
function send(id){
    $.ajax({
        type: 'POST',
        dataType: 'html',
        url: 'receiver.php',
        data: {id: id}
    });
}
</script>

<img src="foo.bar" onclick="send(id)"/> <!-- simplified -->

我的想法是，这个receiver.php文件会收到id，然后根据id

输出整页HTML

但是，当我点击该元素时，我预期的新HTML页面不会显示。当我转到Chrome检查器，“网络”标签时，我可以看到请求，而且响应正是我需要的HTML内容，但为什么它不会更改为新页面而是保留在旧页面上？

编辑：这是我的receiver.php，用于测试目的：

<html>
<head></head>
<body>
    <?php
        echo "<p>".$_POST['comid']."</p>";
        echo "<p> foo foo </p>";
    ?>
</body>
</html>

这是回复：

<html>
<head></head>
<body>
    <p>3</p><p> foo foo </p>    </body>
</html>

Answer 1

您必须对从AJAX调用返回的结果做一些事情：

function send(id){
    $.ajax({
        type: 'POST',
        dataType: 'html',
        url: 'receiver.php',
        data: {id: id},
        success: function(data){
             console.log(data);
        }
    });
}

Answer 2

也许在您的receiver.php脚本中，您正在执行此类操作，您可以根据所接收的ID确定要输出的HTML页面。

switch ($_POST['id']) {
case 'foo':
    $filepath = 'bar';
    break;

    ...
}

readfile($filepath);

您必须使用$.ajax的success函数在您的AJAX查询中反映。

function send(id) {
    $.ajax({
        type: 'POST',
        dataType: 'html',
        url: 'receiver.php',
        data: {id: id},
        success: function (data) {
            // Replace the whole body with the new HTML page
            var newDoc = document.open('text/html', 'replace');
            newDoc.write(data);
            newDoc.close();
        }
    });
}

Ajax请求PHP返回HTML

2 个答案: