如何将WordPress AJAX表单的jQuery代码改写为原生JS并正确放置action参数

你自行编写的代码存在以下几个核心错误，对应修正即可正常运行：

• 核心参数提交被注释：原jQuery逻辑中需要向WordPress后台提交action、nonce、contact_message三个必填参数，你将这三行append代码注释后，后台无法收到合法请求参数，直接返回错误。
• 状态判断逻辑写错：onreadystatechange回调中判断请求完成的条件是ajax.readyState == 4，而非你写的ajax.responseText == 4，导致请求完成后逻辑根本不会触发。
• FormData构造逻辑不符合需求：原jQuery是新建空FormData对象，将表单序列化后的字符串作为contact_message字段的值传入，你直接用new FormData(form)会把表单所有字段单独作为键值提交，和后台预期的接收格式不匹配。
• 缺少错误处理逻辑：没有对非200状态码的请求做处理，也没有对WordPress返回的JSON格式响应做解析，无法正确获取错误提示。

修正后的XMLHttpRequest版本（和原jQuery逻辑完全对齐） #

const form = document.getElementById('camitonContactForm');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  isValidationOn = true;
  validateInputs();

  // 获取表单配置参数
  const formaction = form.dataset.url;
  const noncecheck = form.dataset.nonce;
  // 序列化表单内容（沿用你当前使用的serialize方法即可）
  const forminput = serialize(form);
  
  // 构造FormData，和原jQuery逻辑完全一致
  const formdata = new FormData();
  formdata.append('action', 'contact_message');
  formdata.append('nonce', noncecheck);
  formdata.append('contact_message', forminput);

  const ajax = new XMLHttpRequest();
  ajax.open("POST", formaction, true);
  // 不需要手动设置Content-Type，浏览器会自动为FormData生成正确的boundary
  ajax.onreadystatechange = function() {
    // 请求完成
    if (ajax.readyState === 4) {
      // 请求成功
      if (ajax.status === 200) {
        // 解析JSON响应，和原jQuery success逻辑对应
        const res = JSON.parse(ajax.responseText);
        // 这里补充你原success里的业务逻辑即可
      } else {
        // 请求错误，和原jQuery error逻辑对应
        const err = JSON.parse(ajax.responseText);
        alert(err.data);
      }
    }
  }
  ajax.send(formdata);
});

更简洁的Fetch API版本（现代浏览器推荐） #

如果你不需要兼容IE浏览器，可以用更简洁的Fetch API实现，代码更易维护：

const form = document.getElementById('camitonContactForm');
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  isValidationOn = true;
  validateInputs();

  const formaction = form.dataset.url;
  const noncecheck = form.dataset.nonce;
  const forminput = serialize(form);
  
  const formdata = new FormData();
  formdata.append('action', 'contact_message');
  formdata.append('nonce', noncecheck);
  formdata.append('contact_message', forminput);

  try {
    const response = await fetch(formaction, {
      method: 'POST',
      body: formdata
    });
    if (!response.ok) {
      const err = await response.json();
      alert(err.data);
      return;
    }
    const res = await response.json();
    // 补充成功后的业务逻辑
  } catch (error) {
    alert('请求发送失败，请检查网络');
  }
});

额外说明 #

直接用元素的dataset属性获取data-*值比getAttribute写法更简洁，功能完全一致。

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