使用原生JavaScript发送post请求，响应结果为JSON串{ "msg", "Hello， 20th grade”}，将msg属性值显示在弹窗中

好的，我知道了。可以使用XMLHttpRequest对象进行post请求，将返回的JSON串解析出msg属性值，然后在弹窗中显示。

以下是示例代码：

var xhr = new XMLHttpRequest();
xhr.open("POST", 请求地址, true);
xhr.setRequestHeader("Content-type", "application/json");

xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    var responseJson = JSON.parse(xhr.responseText);
    var msg = responseJson.msg;
    window.alert(msg);
  }
};

var requestBody = JSON.stringify({"key": "value"}); // 请求体
xhr.send(requestBody);

请将“请求地址”和“请求体”替换为实际值。

相关问题

（1）使用原生JavaScript发送get请求，响应结果为“Hi， web2022”，显示在控制台 （2）使用原生JavaScript发送post请求，响应结果为JSON串{ "msg", "Hello， 20th grade”}，将msg属性值显示在弹窗中 要求：代码中注明必要的注释。

好的，我会为您解答这两个问题。

(1) 发送get请求，响应结果为“Hi， web2022”，显示在控制台

原生JavaScript发送get请求的代码如下：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置请求方式和请求地址
xhr.open('GET', 'http://localhost:8080/hello', true);

// 发送请求
xhr.send();

// 监听请求状态变化事件
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4 && xhr.status === 200) { // 请求成功
    console.log(xhr.responseText); // 输出响应结果
  }
};

其中，`xhr`对象是XMLHttpRequest对象，通过`open`方法设置请求方式和请求地址，然后通过`send`方法发送请求。最后，监听`onreadystatechange`事件，当请求状态变为4（请求已完成）且请求成功（状态码为200）时，输出响应结果到控制台。

(2) 发送post请求，响应结果为JSON串{ "msg", "Hello， 20th grade”}，将msg属性值显示在弹窗中

原生JavaScript发送post请求的代码如下：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置请求方式和请求地址
xhr.open('POST', 'http://localhost:8080/hello', true);

// 设置请求头信息
xhr.setRequestHeader('Content-Type', 'application/json');

// 发送请求
xhr.send(JSON.stringify({
  name: 'web2022'
}));

// 监听请求状态变化事件
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4 && xhr.status === 200) { // 请求成功
    var response = JSON.parse(xhr.responseText); // 将响应结果解析为JSON对象
    alert(response.msg); // 输出msg属性值到弹窗中
  }
};

其中，与发送get请求的代码类似，不同之处在于需要设置请求头信息（Content-Type为application/json），并且在`send`方法中传入JSON格式的数据。最后，解析响应结果为JSON对象，并将msg属性值输出到弹窗中。

以上就是您提出的两个问题的解答了，希望能够帮到您。

假设：点击“提交”按钮时，发送异步请求，请求的目标uri是"/sayHi", 参数为name，它的值是“web” （1）使用原生JavaScript发送get请求，响应结果为“Hi， web2022”，显示在控制台 （2）使用原生JavaScript发送post请求，响应结果为JSON串{ "msg", "Hello， 20th grade”}，将msg属性值显示在弹窗中 要求：代码中注明必要的注释。

很好，我明白了您的要求。下面是对应的代码示例：

// 发送GET请求
const name = 'web';
const getRequestUrl = '/sayHi?name=' + name;

fetch(getRequestUrl)
  .then(response => response.text())
  .then(result => {
    console.log(result); // 控制台输出：Hi, web2022
  });

// 发送POST请求
const postRequestUrl = '/sayHi';
const postRequestBody = {
  name: 'web',
};

fetch(postRequestUrl, {
  method: 'POST',
  body: JSON.stringify(postRequestBody),
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(result => {
    alert(result.msg); // 弹窗显示：Hello, 20th grade
  });

注释如下：

- 第3行：设置请求参数name的值为'web'，并拼接成GET请求的URL
- 第5-8行：使用fetch函数发送GET请求，并在成功响应后将响应结果输出到控制台中
- 第12-17行：设置POST请求的URL和请求体内容，并使用fetch函数发送POST请求。需要注意的是，需要将请求体内容指定为JSON格式，并设置`Content-Type`头部信息
- 第19-22行：在成功响应后，将响应结果解析为JSON对象，并弹窗显示其中的'msg'属性值