调用AJAX后页面布局未更新的技术求助

数据老陈

2026-5-15

嘿，我一眼就瞅到问题出在哪了——AJAX请求确实发出去了，但你没处理返回的内容，服务器也没把更新后的HTML送回来，页面当然纹丝不动啦！咱们一步步来改：

核心问题拆解

AJAX没处理响应：你的onreadystatechange是空函数，相当于喊了外卖但没人开门接，请求成功后完全没把服务器返回的内容更新到页面上。
PHP没输出内容：最后你给$val赋值了新的HTML，但没把它echo出去，服务器等于没给AJAX任何可以用来更新页面的素材。
页面没固定更新容器：HTML里没有明确的元素用来承载配送成本的内容，AJAX不知道该把新内容替换到哪里。

修改后的代码示例

1. JavaScript（处理AJAX响应）

var htpr = new XMLHttpRequest();
var url = "cart.php";
var val = "extra=" + id;
htpr.open("POST", url, true);
htpr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
htpr.onreadystatechange = function () {
    // 当请求完成且成功时
    if (htpr.readyState === 4 && htpr.status === 200) {
        // 把返回的HTML替换到页面的指定容器里
        document.getElementById('delivery-container').innerHTML = htpr.responseText;
    }
};
htpr.send(val);

2. PHP（输出更新后的HTML）

$delTotal = $delTotal + $extra_delivery_price;
if(isset($_POST["extra"])){
    // 这个test可以留着调试，正式上线建议删掉
    echo "test";
    $val = $_POST["extra"];
    if($val === "Europe"){
        $delTotal = $delTotal + 5;
    }else if($val === "Zone1"){
        $delTotal = $delTotal + 11;
    }else if($val === "Zone2"){
        $delTotal = $delTotal + 25;
    }
}
// 直接写HTML标签就行，不用转义&lt;&gt;
$val = '<input type="hidden" name="shipping_1" id="shipping_1" value="'.$delTotal.'"> <p1>Delivery cost: £'.$delTotal.'</p1><br>';
// 关键！把生成的HTML输出给AJAX
echo $val;

3. HTML（添加更新容器）

<!-- 新增一个容器，AJAX会替换这里的内容 -->
<div id="delivery-container">
    <?php echo $val;?>
</div>

这样改完之后，AJAX请求成功就会把PHP返回的新配送成本HTML替换到页面的delivery-container里，页面布局自然就跟着更新啦！

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