如何将jQuery实现的AJAX POST请求转换为纯JavaScript结构？

没问题！我帮你把这段jQuery的AJAX逻辑转换成纯原生JavaScript的写法，完全实现相同的功能——获取输入框值、以POST形式发送到x.php并处理返回的内容。

首先先补全你提到的可正常运行的jQuery完整结构（方便对比）：

<!-- index.php -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // 假设是点击按钮触发请求
  $('#submitBtn').click(function(e){
    e.preventDefault();
    var inputVal = $('#inputField').val();
    $.ajax({
      url: 'x.php',
      type: 'POST',
      data: { input: inputVal },
      success: function(response){
        // 把x.php返回的内容显示到页面
        $('#result').text(response);
      },
      error: function(xhr, status, error){
        console.error('请求出错：', error);
      }
    });
  });
});
</script>

下面提供两种主流的原生写法，你可以根据浏览器兼容需求选择：

方案1：XMLHttpRequest（兼容所有浏览器） #

这是最传统的原生AJAX实现，能支持所有旧版浏览器：

<!-- index.php -->
<script>
// 等待DOM加载完成，对应jQuery的$(document).ready
document.addEventListener('DOMContentLoaded', function(){
  // 获取页面元素
  const submitBtn = document.getElementById('submitBtn');
  const inputField = document.getElementById('inputField');
  const resultDiv = document.getElementById('result');

  // 绑定点击事件
  submitBtn.addEventListener('click', function(e){
    e.preventDefault(); // 阻止默认提交行为（如果是表单按钮）
    const inputVal = inputField.value;

    // 创建AJAX请求对象
    const xhr = new XMLHttpRequest();
    // 配置请求：POST方法、目标URL、异步模式
    xhr.open('POST', 'x.php', true);
    // 设置请求头，确保服务器能识别表单格式的POST数据
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    // 请求成功回调
    xhr.onload = function(){
      if(xhr.status >= 200 && xhr.status < 300){
        // 处理x.php返回的内容
        resultDiv.textContent = xhr.responseText;
      } else {
        console.error('请求失败，状态码：', xhr.status);
      }
    };

    // 请求出错回调
    xhr.onerror = function(){
      console.error('网络请求出错');
    };

    // 构造POST数据：转成键值对字符串，用encodeURIComponent处理特殊字符
    const postData = `input=${encodeURIComponent(inputVal)}`;
    // 发送请求
    xhr.send(postData);
  });
});
</script>

方案2：Fetch API（现代浏览器推荐） #

Fetch是ES6+推出的新API，写法更简洁优雅，适合支持现代浏览器的场景：

<!-- index.php -->
<script>
document.addEventListener('DOMContentLoaded', function(){
  const submitBtn = document.getElementById('submitBtn');
  const inputField = document.getElementById('inputField');
  const resultDiv = document.getElementById('result');

  submitBtn.addEventListener('click', async function(e){
    e.preventDefault();
    const inputVal = inputField.value;

    try {
      // 发送POST请求
      const response = await fetch('x.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        // 构造POST数据，同样处理特殊字符
        body: `input=${encodeURIComponent(inputVal)}`
      });

      if(!response.ok){
        throw new Error(`请求失败：${response.status}`);
      }

      // 获取并显示x.php返回的内容
      const responseText = await response.text();
      resultDiv.textContent = responseText;
    } catch(error){
      console.error('请求出错：', error.message);
    }
  });
});
</script>

关键注意点 #

• 两种写法都需要设置Content-Type为application/x-www-form-urlencoded，这样x.php才能通过$_POST['input']正常获取数据（和jQuery默认的提交格式一致）。
• 必须用encodeURIComponent()对输入值编码，避免特殊字符（比如空格、中文、&等）导致请求格式错误。
• 如果要发送复杂的JS对象，可以用URLSearchParams快速转换：

  const data = { username: '小明', age: 20 };
  const postData = new URLSearchParams(data).toString();
  // 转换后的数据格式："username=%E5%B0%8F%E6%98%8E&age=20"
  

内容的提问来源于stack exchange，提问作者user9375528