通過AJAX從JavaScript到PHP的POST值，無需jQuery

Question

我正在嘗試發送一個JavaScript變量，以供PHP在服務器端進行處理，然后回顯結果。 我的ajax請求導致readyState == 4和status == 200但PHP一直回顯一個空數組/值。

我很確定這來自我的Ajax調用，該請求發送了一個空請求，但是我嘗試的所有操作均不起作用，所以也許我在這里出錯了。

JS（來自index.html ）：

var valueToSend = Math.random(); 

var request = false;
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
    request = new ActiveXObject('Microsoft.XMLHTTP');
}

function send_ajax() {
    if (request) {
        request.open('POST', 'test.php', true);
        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
                console.log(request.responseText);
            }
        }
        request.send(valueToSend); //this line is probably not sending the value the way I expect it to
    }
}

PHP（來自test.php ）：

echo $_POST['name']; //simple echo to check if PHP indeed receives valueToSend

我最后的嘗試是更改request.send(valueToSend); 與.send(encodeURI('name=' + valueToSend)); 但是它只是使ajax調用將頁面位置重定向到一個不存在的頁面位置。

我究竟做錯了什么 ？

Answer 1

您的代碼中幾乎沒有錯誤，例如：

• 即使通過定義的send_ajax()函數，您也沒有在代碼中的任何地方調用它。

• 對於POST請求，您需要將HTTP標頭setRequestHeader()與請求一起發送，如下所示：

   request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 

• echo $_POST['name']; 在test.php頁面中無法使用，因為此處未定義 name 。 您的send()方法調用應如下所示：

   request.send("name="+valueToSend); 

因此完整的JavaScript代碼如下所示：

var valueToSend = Math.random(); 

var request = false;
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
    request = new ActiveXObject('Microsoft.XMLHTTP');
}

function send_ajax() {
    if (request) {
        request.open('POST', 'test.php', true);
        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
                console.log(request.responseText);
            }
        }
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        request.send("name="+valueToSend);
    }
}

send_ajax();