ajax整合

最新推荐文章于 2024-06-20 20:55:34 发布

古德猫码农

最新推荐文章于 2024-06-20 20:55:34 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签： ajax

本文链接：https://blog.csdn.net/qq_47040462/article/details/123782206

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1、客服端与服务器

1.1、客服端与服务器通信过程

1.2、网页请求数据

1.3、资源请求

2、ajax请求（网页与服务器之间的数据交互）

2.1jquery中得到ajax

2.1.1$.get()函数的语法

eg：有参请求

<script>
        $(function() {
            $("#btn").on("click",function() {
                $.get("URL",{id:1},function(res){
                    console.log("res");
                })
            })
        })
    </script>

2.1.2$.post()函数语法

eg:

<script>
        $(function() {
            $("#btn").on("click",function() {
                $.post("URL",{id:1},function(res) {
                    console.log(res);
                })
            })
        })
    </script>

2.1.3$.ajax()函数语法

eg:

   <script>
        $(function() {
            $("#btn").on("click",function() {
                $.ajax({
                    type:'GETE',
                    url:("http://www.baidu.com"),
                    data:{
                        id:1
                    },
                    success:function(res){
                        console.log(res);
                    }
                })
            })
        })
    </script>

3、接口

3.1接口请求过程

3.2接口测试工具

3.3接口文档

4、form表单

4.1表单属性

4.2表单的同步提交

4.2.1表单同步缺点

4.2.2解决同步提交缺点

方案：表单负责提交，ajax负责将数据传给服务器

4.3通过ajax提交表单数据

4.3.1监听表单事件

 <form action=""  id="submit">
        <input type="text">
        <input type="password" name="" id="">
        <input type="submit" placeholder="提交" id="submit">
    </form>
    <script>
        $("#submit").on("submit",function() {
            alert("监听到了");
        })
     </script>

4.3.2阻止表单默认提交行为

 <form action=""  id="submit">
        <input type="text">
        <input type="password" name="" id="">
        <input type="submit" placeholder="提交" id="submit">
    </form>
    <script>
        $("#submit").on("submit",function(e) {
            alert("监听到了");
            // 阻止默认行为
            e.preventDefault();
        })
     </script>

4.3.3 serialize（）函数

eg;

<form action=""  id="submit">
        <input type="text" name="uanme">
        <input type="password" name="password" id="">
        <input type="submit" placeholder="提交" id="submit">
    </form>
    <script>
        $("#submit").on("submit",function(e) {
            alert("监听到了");
            // 阻止默认行为
            e.preventDefault();
            var data=$("#submit").serialize();
            console.log(data);

        })
     </script>

5、ajax加强

5.1XMLHttpRequest的基本使用

5.1.1使用xhr发起get请求

eg1：不带惨请求：

eg2：带参请求：

5.1.2查询字符串

5.1.3URL编码与解码

5.1.4利用xhr发起post请求

6、数据交换格式

6.1XML

6.2JSON

7、封装自己的ajax函数

8、XMLHttpRequest Level2新特性

8.1设置http请求时限

eg：

<script>
        var xhr=new XMLHttpRequest();
        // 设置超时时间
        xhr.timeout=3000;
        // 设置超时后处理函数
        xhr.ontimeout=function() {
            console.log("超时了");
        }
        xhr.open("GET","http://www.liulongbin.top:3006/api/getbooks");
        xhr.send();
        xhr.onreadystatechange =function() {
            if(xhr.readyState===4 && xhr.status===200) {
                console.log(xhr.responseText);
            }
        }
    </script>

8.2formData对象管理表单数据

提交表单

eg;

<script>
        // 新增FormData对象
        var fd=new FormData();
        // 为FormData添加表单项
        fd.append('uname','as');
        fd.append("upwd",'12343');
        // 创建xhr对象
        var xhr=new XMLHttpRequest();
        // 指定请求类型和地址
        xhr.open("POST","http://www.liulongbin.top:3006/api/formdata");
        // 直接交FormData对象,与提交网页表单效果一样
        xhr.send(fd);
        xhr.onreadystatechange=function() {
            if(xhr.readyState===4 && xhr.status===200) {
                console.log(JSON.parse(xhr.responseText));
            }
        }
    </script>

获取表单值

eg：

    <script>
        // 通过DOM事件获取到form表单元素
        var form=document.querySelector("#form");
        form.addEventListener("submit",function(e) {
            // 阻止默认行为
            e.preventDefault();
            // 创建formData，快速获取到表中数据
            var fd=new FormData(form);
            var xhr=new XMLHttpRequest();
            xhr.open("POST","http://www.liulongbin.top:3006/api/formdata");
            xhr.send(fd);
            xhr.onreadystatechange=function() {
                if(xhr.readyState===4 && xhr.status===200) {
                    console.log(JSON.parse(xhr.responseText));
                }
            }
        })
    </script>

8.3用xhr上传文件

上传文件完整案例：

<!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>
    <link rel="stylesheet" href="../库/bootstrap-3.4.1-dist/css/bootstrap.css">
    <script src="../库/jquery.js"></script>
</head>
<body>
    <!-- 1.定义UI结构 -->
    <!-- 文件选择框 -->
    <input type="file" id="filel" />
    <!-- 上传文件 -->
    <button id="btnUpload">上传文件</button>
    <!-- 进度条  bootstrap -->
    <div class="progress" style="width: 500px; margin: 15px 10px;">
        <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
          0%
        </div>
      </div>
    <!-- 显示上传服务器的图片 -->
    <img src="" alt="" id="img" width="800" />

    <script>
        // 2.验证是否选择了文件
        // 获取上传文件按钮
        var btnUpload=document.querySelector("#btnUpload");
        // 为按钮添加click事件监听
        btnUpload.addEventListener("click",function() {
            // 获取选中的文件列表
            var files=document.querySelector("#filel").files;
            if(files.length<=0) {
                return alert("请选择需要上传的文件");
            } else {
                // 3、向formdata追加文件
                // 创建对象
                var fd=new FormData();
                // 向FromData追加文件
                fd.append("avatar",files[0]);
                
                // 4发起上传请求
                var xhr=new XMLHttpRequest();
                // 显示文件上传进度
                xhr.upload.onprogress=function(e) {
                    // e.lengthComputable是一个布尔值，表示当前上传资源是否具有可计算长度
                    if(e.lengthComputable) {
                        // e.loaded 已传输字节
                        // e.total 需传输字节
                        // 计算进度条百分比
                        var percentComplete=Math.ceil((e.loaded/e.total)*100);
                        // 设置进度条宽度
                        $("#percent").attr('style','width:'+percentComplete+'%;').html(percentComplete+'%');
                    }
                }
                xhr.upload.onload=function() {
                        $("#percent").removeClass().addClass("progress-bar progress-bar-success");
                    }
                xhr.open("POST","http://www.liulongbin.top:3006/api/upload/avatar");
                xhr.send(fd);
                // 监听事件
                xhr.onreadystatechange=function() {
                    if(xhr.readyState===4 && xhr.status===200) {
                        var data=JSON.parse(xhr.responseText);
                        if(data.status===200) {
                            // 上传成功
                            // 将服务器返回的图片地址设为img的属性
                            document.querySelector("img").src="http://www.liulongbin.top:3006"+data.url;
                        } else {
                            // 上传失败
                            console.log("图片上传失败"+data.message);
                        }
                    }
                }
            } 
            
        })
        
    </script>
</body>
</html>

9、axios

eg：

<script>
        // get请求
        document.querySelector("#btn1").addEventListener("click",function() {
            var url='http://www.liulongbin.top:3006/api/get';
            var param={name:'zs',age:20};
            axios.get(url,{params:param}).then(function(res) {
                console.log(res);
            })
        })

        // post请求
        document.querySelector("#btn2").addEventListener("click",function() {
            var url="http://www.liulongbin.top:3006/api/post";
            var param={Location:'北京',address:"顺义"};
            axios.post(url,param).then(function(res) {
                // result是服务器返回的数据
                var result=res.data;
                console.log(result);
            })
        })

        //直接发起axios请求  get
        document.querySelector("#btn3").addEventListener("click",function() {
            var url='http://www.liulongbin.top:3006/api/get';
            var param={name:'钢铁侠',age:35};
            axios ({
                method:"GET",
                url:url,
                params:param
            }).then(function(res) {
                console.log(res.data);
            })
        })
         //直接发起axios请求  post
         document.querySelector("#btn4").addEventListener("click",function() {
            var url='http://www.liulongbin.top:3006/api/post';
            var param={name:'钢铁侠',age:35};
            axios ({
                method:"POST",
                url:url,
                price:param
            }).then(function(res) {
                console.log(res.data);
            })
        })

10、跨域与JSONP

10.1同源策略

10.2跨域

10.3JSONP

10.4防抖和节流

11、HTTP协议

11.1http协议简介

11.2http请求消息

11.3http响应消息

11.4http请求方法

11.5http响应状态代码

常见响应状态码

古德猫码农

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax整合

1、客服端与服务器1.1、客服端与服务器通信过程1.2、网页请求数据1.3、资源请求2、ajax请求（网页与服务器之间的数据交互）2.1jquery中得到ajax2.1.1$.get()函数的语法eg：有参请求<script> $(function() { $("#btn").on("click",function() { $.get("URL",{id:1},f..
复制链接

扫一扫