ajax弹出选择 示例代码

Ajax弹出选择是一种常见的网页交互方式，它可以通过Ajax技术实现在当前页面弹出一个选择框，用户可以在选择框中进行选项的选择，并将选择的结果通过Ajax请求发送到服务器进行处理。

下面是一个使用Ajax弹出选择的示例代码：

// 创建一个函数，用于弹出选择框
function showPopup() {
  // 创建一个div元素作为选择框的容器
  var popup = document.createElement('div');
  popup.classList.add('popup');
  // 在选择框中添加选项
  var option1 = document.createElement('button');
  option1.innerText = 'Option 1';
  popup.appendChild(option1);
  var option2 = document.createElement('button');
  option2.innerText = 'Option 2';
  popup.appendChild(option2);
  // 监听选项点击事件
  option1.addEventListener('click', function() {
    // 发送选择结果到服务器
    sendSelection('Option 1');
    // 关闭选择框
    closePopup();
  });
  option2.addEventListener('click', function() {
    // 发送选择结果到服务器
    sendSelection('Option 2');
    // 关闭选择框
    closePopup();
  });
  // 将选择框添加到页面中
  document.body.appendChild(popup);
}
// 创建一个函数，用于关闭选择框
function closePopup() {
  var popup = document.querySelector('.popup');
  // 从页面中移除选择框
  document.body.removeChild(popup);
}
// 创建一个函数，用于发送选择结果到服务器
function sendSelection(selection) {
  // 使用Ajax技术发送选择结果到服务器
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/selection', true);
  xhr.setRequestHeader('Content-type', 'application/json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 处理服务器返回的响应
      console.log(xhr.responseText);
    }
  };
  xhr.send(JSON.stringify({ selection: selection }));
}
// 调用函数显示选择框
showPopup();

以上示例代码中，首先定义了一个`showPopup()`函数，该函数用于创建一个弹出框并添加选项。在弹出框中，通过创建`button`元素来表示选项，并为每个选项添加了点击事件监听器。在点击选项时，会调用`sendSelection()`函数发送选择结果到服务器，并调用`closePopup()`函数关闭选择框。

`closePopup()`函数用于关闭选择框，它通过选择器获取到选择框元素，并从页面中移除该元素。

`sendSelection()`函数使用Ajax技术发送选择结果到服务器。它创建了一个`XMLHttpRequest`对象，设置请求的方法、URL和请求头。在`onreadystatechange`事件中，通过`readyState`和`status`判断请求是否成功，并在成功时处理服务器返回的响应。

调用`showPopup()`函数即可在页面中弹出选择框。