POST 使用 XMLHttpRequest 和 HTML 传递多个参数

Question

我正在尝试通过 HTML 表单将多个参数传递到 XMLHttpRequest。该请求采用网络 SSID 和 PSK 并将其传递到 /connect 端点。

当我使用硬编码 SSID 和 PSK 时它有效：

var data = '{"ssid":"homenetwork", "psk":"mypassword"}';
xhr.send(data);

当我尝试从 HTML 表单中提取数据时，我在 Chrome 中得到 net::ERR_EMPTY_RESPONSE。

<!DOCTYPE html>
<html>
<br>

<label for="network">Network Name (SSID):</label>
<input type="text" id="network" name="network" required size="15">

<label for="presharedkey">Network Password (PSK): </label>
<input type="text" id="presharedkey" name="presharedkey" required size="15">


<button onclick="connectWifi()">Save</button> <br>

<script>
function connectWifi() {
var network = document.getElementById("network") .value;
var presharedkey = document.getElementById("presharedkey") .value;
var url = "http://192.168.0.236:8080/connect";
var xhr = new XMLHttpRequest();

xhr.open("POST", url);

xhr.setRequestHeader("Content-Type", "application/json");

xhr.onreadystatechange = function () {
   if (xhr.readyState === 4) {
      console.log(xhr.status);
      console.log(xhr.responseText);
   }};

   // var data = '{"ssid":"homenetwork", "psk":"mypassword"}';
   var data = 'ssid='+network+'&psk='+presharedkey;
   xhr.send(data);

}
</script>

</html>

我从 .

中拉出的 var data = 行

提前致谢。

Answer 1

您使用的 data 变量需要是一个 JSON 对象。在您的示例中，它是一个字符串，因此不会传递单个值，只传递一个字符串。

尝试：

var data = `{"ssid": "${network}", "psk": "${presharedkey}"}`;

[编辑] 我似乎误解了原来的问题。 OP 试图将数据作为 JSON 对象发送，但不知道如何格式化它（他们声称手动传递变量字符串有效）。

POST 使用 XMLHttpRequest 和 HTML 传递多个参数

Passing multiple parameters by POST using XMLHttpRequest and HTML

javascript

webforms

xmlhttprequest