無法使用post方法在AJAX調用中發送數據

Question

這是我的代碼，它非常簡單並且可以完美地工作：

var r = new XMLHttpRequest();
var name='KillerSeba';
r.open("GET","../Serve/servepage.php?name="+name,true);
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) return;
  alert("Success: " + r.responseText);
};
r.send();

此代碼僅在頁面加載時發送警報“成功：KillerSeba”。 而且我的php文件可以回答請求，看起來有點：

<?php
$s=$_REQUEST['name'];
echo $s;
?>

然后，我想使用POST方法而不是GET之一。 為此，我將“ GET”更改為“ POST”，將url更改為php文件，然后將名稱變量添加到send（）函數，因此我的JavaScript代碼如下所示：

var r = new XMLHttpRequest();
var name='KillerSeba';
r.open("POST","../Serve/servepage.php",true);
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) return;
  alert("Success: " + r.responseText);
};
r.send(name);

但是現在腳本沒有將任何數據發送到php文件，因為我只收到“成功：”警報。 KillerSeba消散到某個地方。 我試圖在send（）函數中使用'name'和“ name”而不是name，但我嘗試用$ _POST替換$ _REQUEST，但仍然無濟於事。 所以我的問題是：如何使用POST方法在AJAX請求中發送數據？ send（）函數如何工作？ PS我更喜歡僅使用Vanilla JS Framework。

Answer 1

您正在發送name但沒有任何變量名（它被視為沒有任何值的變量名）。

更改您的r.send(name); 到r.send('name=' + name); 。

有關更多信息，請查看MDN Web文檔

編輯：感謝您的提示，當然您需要在發送請求之前設置適當的標頭：

r.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

Answer 2

由於您要以字符串形式發送名稱而沒有任何參數，這就是為什么它不適用於POST方法，但是當您使用GET發送時，您會將名稱與url連接在一起的原因。 現在，您必須以與GET方法發送相同的方式傳遞參數 。 就像這樣嘗試，我只是將名稱包裝到一個名為params的變量中，該變量包含params = 'name='+name; 因此，您必須使用r.send(params)來發送它。 請參閱此處的GET和POST示例

var r = new XMLHttpRequest();
var name='KillerSeba';
r.open("POST","../Serve/servepage.php",true);
//Send the proper header information along with the request
r.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) return;
  alert("Success: " + r.responseText);
};
params = 'name='+name;
r.send(params);