首页 > 其他分享 >Ajax的封装

Ajax的封装

时间:2022-08-26 18:36:35浏览次数:53  
标签:function 封装 res ajax xhr Ajax btn method

        //ajax的回调函数的封装,建议不使用回调函数处理异步问题         let btn = document.querySelector('button')         btn.addEventListener('click', () => {             ajax('get', '/data', function (res) {                 alert(res)             })         })
        function ajax(method = 'get', url = '/data', fun) {             const xhr = new XMLHttpRequest()             xhr.open(method, url)             xhr.send()             xhr.onreadystatechange = function () {                 if (xhr.readyState === 4 && xhr.status === 200) {                     fun(xhr.responseText)                 }             }         }         //promise         let btn = document.querySelector('button')         btn.addEventListener('click', () => {             ajax('get', '/data').then(res => {                 alert(res)             })         })         function ajax(method = 'get', url = '/data') {             return new Promise((resolve) => {                 const xhr = new XMLHttpRequest()                 xhr.open(method, url)                 xhr.send()                 xhr.onreadystatechange = function () {                     if (xhr.readyState === 4 && xhr.status === 200) {                         resolve(xhr.responseText)                     }                 }             })         }

标签:function,封装,res,ajax,xhr,Ajax,btn,method
From: https://www.cnblogs.com/GFM0518/p/16628776.html

相关文章

  • axios封装loading加载
    实现如下图效果  点击获取数据按钮出现loading效果1.定义一个Loading组件<template><divv-if="isShow"class="box"><divclass="container"><div......
  • ASEMI整流桥DB307S参数,DB307S规格,DB307S封装
    编辑-ZASEMI整流桥DB307S参数:型号:DB307S最大重复峰值反向电压(VRRM):1000V最大RMS电桥输入电压(VRMS):700V最大直流阻断电压(VDC):1000V最大平均正向整流输出电流(IF):3A峰值正......
  • ajax请求
    请求示例$.ajax({url:"/Home/GetAlarmPageData?state="+state+"&name="+name+"&index="+num,dataType......
  • 封装文件导入组件,含导入进度条
    需求系统中需要有多个文件导入的地方,因此需要把它封装为组件便于复用。问题是:每次的导入url不同,每次封装的导入接口应该在主页面用呢?还是在组件页面用?解决办法分析:其......
  • Jquery Ajax添加header参数
    在使用ajax请求接口时需要在请求头添加token来进行身份验证,方式如下:$.ajax({ type:'GET', url:'http://api.php', dataType:'json', jsonp:'callbac......
  • 什么是双向链表?双向链表的操作封装实现(增删改查)?
    什么是双向链表?双向链表既可以从头遍历到尾,又可以从尾遍历到头也就是链表相连的过程是双向的.那么它的实现原理,你能猜到吗?一个节点既有向前连接的引用,也......
  • ajax经典表单提交
    <scripttype="text/javascript">functionlogin(){$.ajax({//几个参数需要注意一下type:"POST",//方法类型......
  • $.ajax异步请求无法下载文件到浏览器本地的问题
     //open这种方式有个弊端,就是转的参数值不能太大,所以只能用jquery创建表单form在提交(ajax异步请求不会触发浏览器下载文件的功能)varuserAgent=naviga......
  • JS函数封装实现控件拖拽
    js脚本exportfunctiondragBox(drag,wrap){//用于获取父容器的样式属性值functiongetCss(ele,prop){//getComputedStyle返回值是带单位的字符串,所以......
  • PHP+AJAX实现异步上传文件
    文件上传功能是动态Web应用程序的常用功能。通常,php采用提交表单并刷新页面的方法上传文件。但是,如果您想提供更好的用户体验,则可以使用jQuery和Ajax来上传文件而无需刷新......