前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ajax基本格式

ajax基本格式

作者头像
老猫-Leo
发布2023-12-11 20:27:12
1880
发布2023-12-11 20:27:12
举报
文章被收录于专栏:前端大全前端大全

ajax的基本格式

jQuery

代码语言:javascript
复制

$.ajax({
    async: true,//是否异步
    url: "url",//目的地
    method: "POST",//传输方法
    dataType: "json",//返回值类型
    data: {
      data1: "a",
      data2: "b",
      data3: "c"//传递的数据内容
    },
    beforeSend: function () {
      //发送请求之前
    },
    success: function (result) {
      //成功
    },
    error: function () {
      //失败
    },
    complete: function () {
      //请求完成
    }
  });

JavaScript

代码语言:javascript
复制

//1.创建对象
let xhr = new XMLHttpRequest();
//2.调用open
xhr.open('POST', 'http://example.com');
//3.设置Content-Type内容格式(注意contenttype类型)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.调用send()
xhr.send(formData);
//5.设置readystatechange事件接收响应数据
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

//文件上传进度监测
xhr.upload.onprogress = function (e) {
  if (e.lengthComputable) {
    //加载值比总需加载值的百分比,可采用bootstrap progress-bar样式。
    let percent = e.loaded / e.total * 100 + "%";
    document.getElementById('percent').style.width = percent;
    document.getElementById('percent').innerText = percent;
  } else {
    alert("文件不支持上传中的进度监测");
  }
};
//设置上传文件完成的事件
xhr.upload.onload = function () {

};

Ajax XMLHttpRequest

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-10-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • jQuery
  • JavaScript
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档