ajax实现封装

最新推荐文章于 2023-03-02 11:50:28 发布

很好。

最新推荐文章于 2023-03-02 11:50:28 发布

阅读量134

点赞数

分类专栏： js 文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/qq_52886072/article/details/120316091

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<script>
/**
   * ajax
   * @param options ajax 选项对象，对象结构如：{url, method, data, dataType, success, error}
   *  url: 请求资源的路径
   *  method：请求方法，默认为 GET
   *  data：对象，向服务端发送的数据，如：{username: 'admin', password: 'admin'}
   *  dataType：预期从服务端返回的数据格式，默认为 json
   *  success：函数，是请求成功后执行的回调函数，传递请求成功的数据作为参数，如：function(data) {}
   *  error：函数，是请求失败后执行的回调函数
   */
  function ajax(options={}){
    //   结构options中的属性
      let {url,method="get",data,dataType="json",success,error}=options;
      if (!url) {
          throw new Error("ajax请求为提供url地址");
      }
    //处理用于向后端发送数据
    let params=null;
    if (data) {
        // 临时在params中保存数组数据
        params=[];
        // 更新data对象中个属性，如：{name："zhangsan"};
        for(const key in data){
            params.push(`${key}=${data[key]}`)
        }
        // 使用&字符对在params(data)中的每一个数据进行拼接
        params=params.join("&");
    }
    // 判断是否为get请求方式并且存在向后头请求的数据
    if (method==='GET' && params) {
        // 查询字符串以 ? 号拼接在 URL 后
        url=url+`?${params}`;
        params=null;
    }
    // 创建请求
    let xhr=new XMLHttpRequest();
    // 打开设置请求方式地址
    xhr.open(method,url,true);
    // 设置请求头
    xhr.setRequestHeader("Content-Type",'application/x-www-form-urlencoded');
    // 发送请求
    xhr.send(params);
    // 响应处理
    xhr.onreadystatechange=function(){
        if (xhr.readyState==4) {//请求处理完毕，响应就绪
            if (xhr.status==200) {//http状态码为200,时
                let data=xhr.responseText;//获取响应数据
                // 如果后端返回的json格式，则进行JSON.parse（）转化
                if (dataType==='json') {
                    data=JSON.parse(data);
                }
                // 数据逻辑处理
                success && success(data);
            }else{
                error && error(xhr.status)//错误，返回传递http状态码
            } 
        }
     }
  }
  ajax({
      url: './00.ajax.php',
      method: 'post',
      data: { name: 'zs', age: 18 },
      dataType: '',
      success: (data) => {
        console.log(data);

      }, error: (data) => {
        console.log(data);

      }

    })
</script>
</body>
</html>

html页面代码

<?php
    $name=$_POST['name'];
    $age=$_POST['age'];
    echo'我叫'.$name.'今年'.$age;
?>

php代码

很好。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax实现封装

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫