从 jquery 到 javascript 的 Ajax

Question

我想将一个 ajax 函数从 jquery 转换为纯 javascript

我已经尝试过了，但它的反应方式与我尝试使用普通 js 时 url 没有收到响应的方式不同

这是我的 jquery

(function ($){
try{
        var event_category = 'a';
        var event_name = 'b';
        var page_url = 'c';
        var url = "myurl";
        var data = {
                event_category: event_category,
                event_name: event_name,
                page_url: page_url
        };
        $.ajax({
                crossDomain: true,
                type: "POST",
                url: "myurl",
                data : {event_category: event_category, 
                        event_name: event_name, 
                        page_url: page_url
                        }
        });
  } catch(e){console.log(e)};  
})(jQuery);

这是我尝试过的

var event_category = 'action';
var event_name = 'click';
var page_url = 'test';
var request = new XMLHttpRequest();
request.open('POST', 'myurl');
request.setRequestHeader("Content-Type", "application/json; utf-8");
          params = {
              event_category: event_category, 
              event_name: event_name, 
              page_url: page_url
              } 
request.send(JSON.stringify(params));

不知道我应该改变什么

编辑：

基于我在开发者工具上检查网络数据的其中一个 cmets jquery 对此格式的标题有响应 enter image description here enter image description here

但是javascript发送的数据是这种格式

enter image description here

基本上，javascript 不会以 url 参数格式发送它。不知道如何强制它以相同的格式发送它

Answer 1

有什么理由不使用 fetch API（它可以在蹩脚的浏览器中填充...）？

const ajax = async function(url, data) {
  try {

    const response = await fetch(url, {
      credentials: 'include', // like jQuery $.ajax's `crossDomain`
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      // this mimics how jQuery sends POST data as querystring by default
      body: Object.entries(data).map(([key, val]) => `${key}=${val}`).join('&'),
    });

    data = await (
      response.headers.get('content-type').includes('json')
      ? response.json()
      : response.text()
    );

    console.log(data);

    return data;
  } catch(err) { console.log(err) };
}

ajax('myurl', {
  event_category: 'a', 
  event_name: 'b', 
  page_url: 'c',
});