调用ajax时页面布局不更新

Question

嗨，我确定我做了一些我无法弄清楚的蠢事。

我有一个ajax函数可以调用页面来改变它的HTML，但是html布局没有改变。

使用Javascript：

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 () {
};
htpr.send(val);

PHP

$delTotal = $delTotal + $extra_delivery_price;
if(isset($_POST["extra"])){
    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;
    }
}

$val = '
<input type="hidden" name="shipping_1" id="shipping_1" value="'.$delTotal.'">

<p1>Delivery cost: £$delTotal</p1><br>';

HTML

<?php echo $val;?>