首页 > 其他分享 >ajax简单封装

ajax简单封装

时间:2024-10-24 10:35:35浏览次数:1  
标签:status function 封装 hdcajax xhr ajax 简单

  <script>
   function hdcajax ({
    url,
    method = "get",
    data = {},
    timeout = 1000,
    headers = {},
    success,
    failure
   }={}){
    //1.创建对象
    const xhr = new XMLHttpRequest()
    //2.监听状态变化
    xhr.onload = function(){
      if(xhr.status >=200 && xhr.status<300){
        success && success(xhr.response)
      }else{
        failure && failure({status:xhr.status,message:xhr.statusText})
      }
    }
    //3.设置类型
    xhr.responseType="json"
    //open方法
    //5.发送请求
    if(method == "get"||method == "GET"){
      let queryStrings = []
      for(const key in data){
        queryStrings.push(`${key} = ${data[key]}`)
      }
      xhr.open(method,url+`?`+queryStrings.join("&"))
      xhr.send()
    }
    else{
      xhr.open(method,url)
      xhr.setRequestHeader("Content-Type","application/json")
      xhr.send(JSON.stringify(data))
    }
    
   }
   //调用者:
   hdcajax({
    url:"http://123.207.32.32:1888/02_param/get",
    success:function(res){console.log(res)},
    failure:function(err){alert(err.message)},
    data:{
      name:"jsondata",
      age:"22"
    },
   })
  // hdcajax({
  //   url:"http://123.207.32.32:1888/02_param/postjson",
  //   method:"post",
  //   data:{
  //     name:"jsondata",
  //     age:"22"
  //   },
  //   success:function(res){console.log(res)},
  //   failure:function(err){alert(err.message)}
  //  })
  </script>

标签:status,function,封装,hdcajax,xhr,ajax,简单
From: https://www.cnblogs.com/hdc-web/p/18499075

相关文章

  • 力扣 简单 111.二叉树的最小深度
    文章目录题目介绍题解题目介绍题解最小深度:从根节点到最近叶子结点的最短路径上节点数量。分三种情况讨论即可:当前节点为空,则返回当前节点minDepth=0;当前节点左右子树都存在,则返回当前节点minDepth=左右子树最小深度的最小值+1;当前节点的左右子树其中一个不存......
  • 【NodeJS】NodeJS+mongoDB在线版开发简单RestfulAPI (四):状态码的使用
    本项目旨在学习如何快速使用nodejs开发后端api,并为以后开展其他项目的开启提供简易的后端模版。(非后端工程师)由于文档是代码写完之后,为了记录项目中需要注意的技术点,因此文档的叙述方式并非开发顺序(并非循序渐进的教学文档)。建议配合项目源码node-mongodb-template。【NodeJS......
  • 【NodeJS】NodeJS+mongoDB在线版开发简单RestfulAPI (五):POST上传文件的设置
    本项目旨在学习如何快速使用nodejs开发后端api,并为以后开展其他项目的开启提供简易的后端模版。(非后端工程师)由于文档是代码写完之后,为了记录项目中需要注意的技术点,因此文档的叙述方式并非开发顺序(并非循序渐进的教学文档)。建议配合项目源码node-mongodb-template。【NodeJS......
  • 【NodeJS】NodeJS+mongoDB在线版开发简单RestfulAPI (六):token的设置
    本项目旨在学习如何快速使用nodejs开发后端api,并为以后开展其他项目的开启提供简易的后端模版。(非后端工程师)由于文档是代码写完之后,为了记录项目中需要注意的技术点,因此文档的叙述方式并非开发顺序(并非循序渐进的教学文档)。建议配合项目源码node-mongodb-template。【NodeJS......
  • 【NodeJS】NodeJS+mongoDB在线版开发简单RestfulAPI (七):MongoDB的设置
    本项目旨在学习如何快速使用nodejs开发后端api,并为以后开展其他项目的开启提供简易的后端模版。(非后端工程师)由于文档是代码写完之后,为了记录项目中需要注意的技术点,因此文档的叙述方式并非开发顺序(并非循序渐进的教学文档)。建议配合项目源码node-mongodb-template。【NodeJS......
  • 【NodeJS】NodeJS+mongoDB在线版开发简单RestfulAPI (三):Cors的设置及.env文件的设置
    本项目旨在学习如何快速使用nodejs开发后端api,并为以后开展其他项目的开启提供简易的后端模版。(非后端工程师)由于文档是代码写完之后,为了记录项目中需要注意的技术点,因此文档的叙述方式并非开发顺序(并非循序渐进的教学文档)。建议配合项目源码node-mongodb-template。【NodeJS......
  • 【NodeJS】NodeJS+mongoDB在线版开发简单RestfulAPI (二):项目文件夹架构及路由的设置
    本项目旨在学习如何快速使用nodejs开发后端api,并为以后开展其他项目的开启提供简易的后端模版。(非后端工程师)由于文档是代码写完之后,为了记录项目中需要注意的技术点,因此文档的叙述方式并非开发顺序(并非循序渐进的教学文档)。建议配合项目源码node-mongodb-template。【NodeJS......
  • 【NodeJS】NodeJS+mongoDB在线版开发简单RestfulAPI (八):API说明(暂时完结,后续考虑将
    本项目旨在学习如何快速使用nodejs开发后端api,并为以后开展其他项目的开启提供简易的后端模版。(非后端工程师)由于文档是代码写完之后,为了记录项目中需要注意的技术点,因此文档的叙述方式并非开发顺序(并非循序渐进的教学文档)。建议配合项目源码node-mongodb-template。【NodeJS......
  • 力扣 简单 70.爬楼梯
    文章目录题目介绍题解题目介绍题解思路分析:确定dp数组以及下标的含义:dp[i]:爬到第i层楼梯,有dp[i]种方法确定递推公式:从dp[i]的定义可以看出,dp[i]可以有两个方向推出来。首先是dp[i-1],上i-1层楼梯,有dp[i-1]种方法,那么再一步跳一个台阶不就是dp[i]了么。还有......
  • for 循环()简单到高阶
    for循环的初始意义是遍历一串具有相同特性的值1、遍历数组,根据索引去求值点击查看代码publicclassForDemo1{publicstaticvoidmain(String[]args){int[]arr={1,2,3,4,5,6,7};for(inti=0;i<arr.length;i++){System.out......