AJAX学习笔记6 JQuery对AJAX进行封装

AJAX学习笔记5同步与异步理解_biubiubiu0706的博客-CSDN博客

AJAX请求相关的代码都是类似的,有很多重复的代码,这些重复的代码能不能不写,能不能封装一个工具类。要发送ajax请求的话,就直接调用这个工具类中的相关函数即可。

用JS发送AJAX请求回顾

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX发送GET POST</title>
</head>
<body>
<script type="text/javascript">
    window.onload=function (){
        document.getElementById("btn1").onclick=function(){
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(this.readyState==4){
                    if(this.status==200){
                        console.log("发送成功")
                    }
                }else{
                    console.log("得到错误响应")
                }
            }
            xhr.open("get","/xxxx",true)
            xhr.send()
        }
        document.getElementById("btn2").onclick=function(){
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(this.readyState==4){
                    if(this.status==200){
                        console.log("发送成功")
                    }
                }else{
                    console.log("得到错误响应")
                }
            }
            var username=document.getElementById("username").value
            xhr.open("get","/xxxx?username"+username,true)
            xhr.send()
        }

        document.getElementById("btn3").onclick=function(){
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(this.readyState==4){
                    if(this.status==200){
                        console.log("发送成功")
                    }
                }else{
                    console.log("得到错误响应")
                }
            }
            xhr.open("post","/xxxx"+username,true)
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

            var username2=document.getElementById("username2").value;
            xhr.send("username="+username2)
        }
    }
</script>

<button id="btn1">发送GET无参</button>

<button id="btn2">发送GRT有参</button>
<input type="text" id="username">

<button id="btn3">发送POST有参</button>
<input type="text" id="username2">
</body>
</html>

响应结果一般是个字符串 也有可能是responseXML

一般现在都用JSON字符串

那么需要转成JS对象

复制代码
JSON.parse(this.responseText)

使用JQuery工具类中的AJAX方法来发送请求

引入

$.ajax() 是 jQuery 提供的一个通用 AJAX 请求方法.

$.get()$.ajax() 方法的一个简化版本,专门用于发送 GET 请求。

$.post()$.ajax() 方法的一个简化版本,专门用于发送 POST 请求。

示例

复制代码
$.get(url, [data], [callback])

$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
    console.log(res) // 这里的 res 是服务器返回的数据
})

$.post(
   'http://www.liulongbin.top:3006/api/addbook', // 请求的URL地址
   { bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社' }, // 提交的数据
   function(res) { // 回调函数
      console.log(res)
   }
)

.ajax()比较通过,可以发送put,delete请求 但是.get()和.post()是简化版,暂没有.put和$.delete的写法

下面来完整的写几个示例

$.get()的写法

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery发送AJAX请求</title>
</head>
<body>
<!--引入JQuery-->
<script type="text/javascript" src="ajax/js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    $(function (){//页面加载完毕执行的函数    JQuery的写法  JS的写法--->window.onload=function(){}
        $("#btn1").click(function(){//JQuery写法    JS的写法  document.getElementById("btn1").onclick=function(){
            var username=$("#username").val()//var username=document.getElementById("username").value;
                //发送ajax请求
            $.get("/ajax/JQGET","username="+username,function(data){
                console.log(data)
                $("#div1").html(data)//原来的写法document.getElementById("div1").innerText=data
            })
        })
    })


</script>
<button id="btn1">发送AJAX GET请求</button><br>
用户名:<input type="text" id="username"><br>
<div id="div1"></div>
</body>
</html>

如果不想带参数,就把参数去掉

$.ajax()写法

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX发送GET请求</title>
</head>
<body>
<script type="text/javascript" src="ajax/js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    $(function(){
        //点击事件
        $("#btn1").click(function(){
            //发送AJAX请求
            $.ajax({
                type:"get",
                url:"/ajax/JQGET",
                data:"username="+$("#username").val(),
                async:true,
                success:function(data){
                    console.log(data)
                    $("#div1").html(data)
                }
            })
        })
    })
</script>
<button id="btn1">发送AJAX GET请求</button><br>
用户名:<input type="text" id="username"><br>
<div id="div1"></div>
</body>
</html>

后端随便返回点啥

发送$.post 无参请求

发送$.ajax()post有参数请求

注意

$.get()或者$.post() 方法默认发送的请求是异步的。

如果希望发送的请求可以改变同步或者异步 建议使用$.ajax()这种方式

用$.ajax()方式发送请求的示例

相关推荐
云上艺旅17 小时前
K8S学习之基础七十四:部署在线书店bookinfo
学习·云原生·容器·kubernetes
你觉得20517 小时前
哈尔滨工业大学DeepSeek公开课:探索大模型原理、技术与应用从GPT到DeepSeek|附视频与讲义下载方法
大数据·人工智能·python·gpt·学习·机器学习·aigc
A旧城以西18 小时前
数据结构(JAVA)单向,双向链表
java·开发语言·数据结构·学习·链表·intellij-idea·idea
无所谓จุ๊บ18 小时前
VTK知识学习(50)- 交互与Widget(一)
学习·vtk
FAREWELL0007518 小时前
C#核心学习(七)面向对象--封装(6)C#中的拓展方法与运算符重载: 让代码更“聪明”的魔法
学习·c#·面向对象·运算符重载·oop·拓展方法
吴梓穆19 小时前
UE5学习笔记 FPS游戏制作38 继承标准UI
笔记·学习·ue5
Three~stone19 小时前
MySQL学习集--DDL
数据库·sql·学习
齐尹秦19 小时前
HTML 音频(Audio)学习笔记
学习
V---scwantop---信20 小时前
英文字体:大胆都市街头Y2Y涂鸦风格品牌海报专辑封面服装字体 Chrome TM – Graffiti Font
笔记·字体
瞌睡不来20 小时前
(学习总结32)Linux 基础 IO
linux·学习·io