将 Jquery 转换为 javascript(AJAX)

问题描述

我怎样才能得到相同的结果而不是 jquery 使用 vanilla javascript；

使用 ajax 和 jquery 我设法将值从输入发送到节点 js。

**/script/main.js**
 
///Search ajax call
let searchResults = document.getElementById('search_in_platform_functionality');
  if(searchResults){
     searchResults.addEventListener('keyup',(dataSearch)=>{

     let searchValue = dataSearch.target.value.trim();
      searchRes(searchValue);
   })
}

function searchRes(searchTerm){
    $.get(url,{search:searchTerm},(results)=>{
     console.log(results)
  });
}

/controller.js

 router.get("/",async (req,res)=>{
    var searchObject = req.query;
    console.log(searchObject)
    if(req.query.search !== undefined){
        searchObject = {
           $or:[
             {firstName:{$regex: req.query.search,$options:"i"}},{lastName:{$regex: req.query.search,{username:{$regex: req.query.search,$options:"i"}}
           ]
       }
    }
    await  User.find(searchObject).then(results =>{
      res.status(200).send(results);
  }).catch(error =>{
     console.log(error);
     res.sendStatus(400);

  })
});

如何在节点服务器中获得相同的结果排序参数但没有jquery的javascript焦点vanilla。

let search = new XMLHttpRequest();
search.open('GET',url,(results)=>{
        console.log(results)
});
search.send();

我尝试过类似的方法，但没有用。

解决方法

这是我对 Fetch API 的看法，

{
  "took" : 3,"timed_out" : false,"_shards" : {
    "total" : 1,"successful" : 1,"skipped" : 0,"failed" : 0
  },"hits" : {
    "total" : {
      "value" : 6,"relation" : "eq"
    },"max_score" : null,"hits" : [ ]
  },"aggregations" : {
    "top_users" : {
      "doc_count_error_upper_bound" : 0,"sum_other_doc_count" : 0,"buckets" : [
        {
          "key" : "u3","doc_count" : 3,"top" : {
            "hits" : {
              "total" : {
                "value" : 3,"relation" : "eq"
              },"hits" : [
                {
                  "_index" : "my-index-000001","_type" : "_doc","_id" : "6","_score" : null,"_source" : {
                    "postdate" : "2021-03-06","postid" : "p6"
                  },"sort" : [
                    1614988800000
                  ]
                }
              ]
            }
          }
        },{
          "key" : "u1","doc_count" : 2,"top" : {
            "hits" : {
              "total" : {
                "value" : 2,"_id" : "2","_source" : {
                    "postdate" : "2021-03-02","postid" : "p2"
                  },"sort" : [
                    1614643200000
                  ]
                }
              ]
            }
          }
        },{
          "key" : "u2","doc_count" : 1,"top" : {
            "hits" : {
              "total" : {
                "value" : 1,"_id" : "3","_source" : {
                    "postdate" : "2021-03-03","postid" : "p3"
                  },"sort" : [
                    1614729600000
                  ]
                }
              ]
            }
          }
        }
      ]
    }
  }
}

您正在发送一个 fetch(`url?search=${searchTerm}`).then(response => response.json()).then(results => { console.log(results); }).catch(e => console.log(e)); 方法，因此您需要在 URL 查询字符串中传递参数

GET 回调在 .then 完成时运行。您可以根据需要拥有任意数量的 Promise 回调，但前两个是您访问返回数据所必需的。 MDN Promise.prototype.then()

然后在第一个回调中传递 fetch 的主体，然后您使用其方法将结果转换为您可以在代码中使用的对象或数组或文本 .then() 或 .json()或 .text() 或 .formData() 或 .blob() 阅读更多 here

最后一个 .arrayBuffer() 回调是传递结果供您操作的地方。

您可以传递 .then 回调，以防出现错误并且您需要将其记录下来。 MDN Promise.prototype.catch