将jQuery POST请求转为原生JavaScript时遇到问题求助

核心问题分析 #

你的原生JavaScript代码存在两个关键错误，还有一个潜在的参数编码隐患：

• 原生DOM元素没有.val()方法，这是jQuery专属API，原生操作应使用.value属性
• 直接拼接参数字符串会导致特殊字符编码错误（比如参数包含&、空格、中文时，请求会出现异常）
• 可选优化：readystatechange事件可以用更简洁的load事件替代，同时补充错误处理逻辑

修复后的完整代码 #

const url = "ajax_data";
// 使用URLSearchParams自动处理参数编码，避免手动拼接的编码问题
const params = new URLSearchParams({
  action: 'service_price',
  service: service,
  quantity: quantity,
  dripfeed: dripfeed,
  runs: runs
});

const request = new XMLHttpRequest();
request.responseType = "json";
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

// 用load事件替代readystatechange，仅监听请求完成的场景
request.addEventListener("load", () => {
  if (request.status === 200) {
    const data = request.response;
    // 原生DOM用.value替代jQuery的.val()
    document.querySelector("#charge").value = data.price;
    document.querySelector("#dripfeed-totalquantity").value = data.totalQuantity;
  } else {
    // 补充错误日志，方便调试
    console.error("请求失败，状态码：", request.status);
  }
});

// 监听网络类错误
request.addEventListener("error", () => {
  console.error("请求发生网络故障");
});

request.send(params);

额外说明 #

1. URLSearchParams的优势：自动对参数值进行URL编码，避免手动拼接时的编码遗漏，代码可读性和维护性更强
2. 原生DOM操作规范：所有表单元素（input、select等）的内容读写都通过.value属性完成，这是W3C标准的原生API
3. 错误处理补充：新增了网络错误监听和非200状态码的处理逻辑，便于排查请求失败的原因

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