入门阶段求助：将jQuery AJAX请求转换为原生JavaScript请求

嘿，我完全懂你入门阶段遇到的兼容性糟心事儿——jQuery在有些页面环境里确实容易掉链子。下面我把你的代码彻底转换成原生JavaScript，还会拆解关键部分，帮你搞懂每个步骤：

首先看完整的转换后代码：

const form = document.querySelector('form#test-form');
const submitBtn = document.querySelector('#submit-form');

// 替代jQuery.serializeObject的函数：把表单数据转成键值对对象
function serializeForm(formElement) {
  const formData = new FormData(formElement);
  const formObj = {};
  formData.forEach((value, key) => {
    // 如果表单有多选/复选框这类多值字段，可修改为数组存储，这里先处理基础场景
    formObj[key] = value;
  });
  return formObj;
}

// 原生实现JSONP请求（原代码用了dataType: jsonp，原生需手动处理）
function sendJSONPRequest(url, data) {
  // 把表单数据转成URL查询字符串
  const queryParams = new URLSearchParams(data).toString();
  const fullRequestUrl = `${url}?${queryParams}&callback=handleJSONPResponse`;

  // 创建script标签加载JSONP资源（利用script标签不受同源策略限制的特性）
  const scriptTag = document.createElement('script');
  scriptTag.src = fullRequestUrl;
  document.body.appendChild(scriptTag);

  // 定义全局回调函数，处理JSONP返回的数据
  window.handleJSONPResponse = function(responseData) {
    console.log("Success!");
    console.log("返回的数据:", responseData);
    // 用完移除script标签，避免冗余
    document.body.removeChild(scriptTag);
    // 清除全局回调，防止污染全局作用域
    delete window.handleJSONPResponse;
  }
}

// 绑定按钮点击事件
submitBtn.addEventListener('click', function() {
  const formData = serializeForm(form);
  sendJSONPRequest('url', formData);
});

关键细节解释： #

• DOM元素获取：用document.querySelector()替代jQuery选择器，这是原生JS最常用的元素选择方式，和jQuery的选择器语法基本一致。
• 表单序列化：原生没有serializeObject()，所以我们用FormData API获取表单数据，再转换成普通对象。如果你的表单包含多选框、复选框这类会返回多个值的字段，可以修改serializeForm函数把值存为数组。
• JSONP请求处理：原生JS没有内置JSONP支持，因为JSONP本质是通过加载外部脚本实现跨域。我们需要手动创建<script>标签，把带参数和回调函数名的请求URL设为它的src，再定义全局回调函数处理返回的数据。
• 冲突点修正：原代码同时写了mode: 'no-cors'和dataType: 'jsonp'，这两个是冲突的——no-cors是CORS请求的选项，而JSONP是完全不同的跨域机制，所以转换时我们保留了JSONP逻辑（因为原代码明确用了dataType: jsonp）。

如果你的后端支持CORS，其实可以用更简洁的fetch API实现（不需要JSONP），代码如下：

const form = document.querySelector('form#test-form');
const submitBtn = document.querySelector('#submit-form');

submitBtn.addEventListener('click', async function() {
  const formData = new FormData(form);
  try {
    const response = await fetch('url', {
      method: 'GET',
      // 若后端开启CORS，可去掉mode: 'no-cors'，这样才能读取响应内容
      mode: 'no-cors'
    });
    console.log("Success!");
  } catch (error) {
    console.error("请求失败:", error);
  }
});

注意：no-cors模式下浏览器会限制你读取响应内容，所以如果需要处理返回的数据，一定要让后端开启CORS，然后移除mode: 'no-cors'。

希望这个转换能帮到你，有不懂的地方随时问～

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