php 带有XMLHttpRequest的 AJAX 不发送数据

kiz8lqtg  于 2023-02-07  发布在  PHP
关注(0)|答案(3)|浏览(127)

我想建立一个简单的程序使用XMLHttpRequest来计算三角形的面积。

<body>
    <form>
        <label for="txtLength">Length</label>
        <input type="text" id="txtLength" name="txtLength"><br><br>
        <label for="txtWidth">Width</label>
        <input type="text" id="txtWidth" name="txtWidth"><br><br>
        <input type="hidden" name="submitted" value="1">
        <input type="button" name="Calculate" value="Calculate" onclick="calArea();">
    </form><br><br>

    <div id="showArea">Enter Values and click Calculate.</div>

    <script type="text/javascript">
        function calArea() {
            var len = document.getElementById("txtLength").value;
            var wid = document.getElementById("txtWidth").value;
            var sub = 1;

            var xhttp = new XMLHttpRequest();

            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.readyState == 200) {
                    document.getElementById("showArea").innerHTML = xhttp.responseText;
                }
            };

            xhttp.open("POST", "calculate_area.php", true);
            xhttp.send(len&wid&sub);
        }

</script>
</body>

此代码用于服务器端。

<?php 

print_r($_POST);
if (isset($_POST['sub'])) {
    $len = $_POST['len'];
    $wid = $_POST['wid'];
    $area = (($len*$wid)/2);
    echo $area;
}   
else{
    echo "Not input detected.";
}

?>

即使尝试了这么多的代码,它不发送数据到服务器端.

7gs2gvoe

7gs2gvoe1#

我发现了错误。我把参数作为URL的一部分发送,但是需要把它们作为请求主体的一部分发送。
客户端代码;

function calArea() {
    var len = document.getElementById("txtLength").value;
    var wid = document.getElementById("txtWidth").value;
    var sub = 1;

    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("showArea").innerHTML = xhttp.responseText;
        }
    };

    xhttp.open("POST", "calculate_area.php", true);
    xhttp.setRequestHeader("Content-Type", "application/json");
    xhttp.send(JSON.stringify({len: len, wid: wid, sub: sub}));
}

服务器端代码;

if (isset($_POST['sub'])) {
    $len = $_POST['len'];
    $wid = $_POST['wid'];
    $area = (($len*$wid)/2);
    echo $area;
}   
else{
    echo "Not input detected.";
}
zqry0prt

zqry0prt2#

len&wid&sub

获取一些变量并在它们之间放置Bitwise &不会为您提供一个有用的值来提交给服务器。
您需要将数据编码为可以通过HTTP传输并且服务器端代码可以读取的格式。
PHP本身支持URL编码和Multipart Form编码数据,所以选择其中之一。
URLSearchParams API将为您生成URL编码数据。
例如:

xhttp.send(new URLSearchParams({ len, wid, sub }));

传递一个URLSearchParams对象还可以让XHR自动设置正确的Content-Type请求头,这样PHP就知道它需要做什么来解码数据并用它填充$_POST

7gcisfzg

7gcisfzg3#

你需要把所有的参数放入一个name=value的字符串中,每个参数用&分隔,并且应该对值进行编码,以防它们包含特殊字符。
您还需要设置内容类型,以便正确解析此数据。
所以改变

xhttp.send(len&wid&sub);

应为:

xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhttp.send(`len=${encodeURIComponent(len)}&wid=${encodeURIComponent(wid)}&sub=${encodeURIComponent(sub)}`);

相关问题