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

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

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

    用JS发送AJAX请求回顾

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>AJAX发送GET POST</title>
    6. </head>
    7. <body>
    8. <script type="text/javascript">
    9.     window.onload=function (){
    10.         document.getElementById("btn1").onclick=function(){
    11.             var xhr=new XMLHttpRequest();
    12.             xhr.onreadystatechange=function(){
    13.                 if(this.readyState==4){
    14.                     if(this.status==200){
    15.                         console.log("发送成功")
    16.                     }
    17.                 }else{
    18.                     console.log("得到错误响应")
    19.                 }
    20.             }
    21.             xhr.open("get","/xxxx",true)
    22.             xhr.send()
    23.         }
    24.         document.getElementById("btn2").onclick=function(){
    25.             var xhr=new XMLHttpRequest();
    26.             xhr.onreadystatechange=function(){
    27.                 if(this.readyState==4){
    28.                     if(this.status==200){
    29.                         console.log("发送成功")
    30.                     }
    31.                 }else{
    32.                     console.log("得到错误响应")
    33.                 }
    34.             }
    35.             var username=document.getElementById("username").value
    36.             xhr.open("get","/xxxx?username"+username,true)
    37.             xhr.send()
    38.         }
    39.  
    40.         document.getElementById("btn3").onclick=function(){
    41.             var xhr=new XMLHttpRequest();
    42.             xhr.onreadystatechange=function(){
    43.                 if(this.readyState==4){
    44.                     if(this.status==200){
    45.                         console.log("发送成功")
    46.                     }
    47.                 }else{
    48.                     console.log("得到错误响应")
    49.                 }
    50.             }
    51.             xhr.open("post","/xxxx"+username,true)
    52.             xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
    53.  
    54.             var username2=document.getElementById("username2").value;
    55.             xhr.send("username="+username2)
    56.         }
    57.     }
    58. </script>
    59.  
    60. <button id="btn1">发送GET无参</button>
    61.  
    62. <button id="btn2">发送GRT有参</button>
    63. <input type="text" id="username">
    64.  
    65. <button id="btn3">发送POST有参</button>
    66. <input type="text" id="username2">
    67. </body>
    68. </html>

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

    一般现在都用JSON字符串

    那么需要转成JS对象

    JSON.parse(this.responseText)

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

    引入

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

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

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

    示例

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

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

     

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

    下面来完整的写几个示例

    $.get()的写法

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>JQuery发送AJAX请求</title>
    6. </head>
    7. <body>
    8. <!--引入JQuery-->
    9. <script type="text/javascript" src="ajax/js/jquery-3.4.1.js"></script>
    10. <script type="text/javascript">
    11.     $(function (){//页面加载完毕执行的函数    JQuery的写法  JS的写法--->window.onload=function(){}
    12.         $("#btn1").click(function(){//JQuery写法    JS的写法  document.getElementById("btn1").onclick=function(){
    13.             var username=$("#username").val()//var username=document.getElementById("username").value;
    14.                 //发送ajax请求
    15.             $.get("/ajax/JQGET","username="+username,function(data){
    16.                 console.log(data)
    17.                 $("#div1").html(data)//原来的写法document.getElementById("div1").innerText=data
    18.             })
    19.         })
    20.     })
    21.  
    22.  
    23. </script>
    24. <button id="btn1">发送AJAX GET请求</button><br>
    25. 用户名:<input type="text" id="username"><br>
    26. <div id="div1"></div>
    27. </body>
    28. </html>

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

    $.ajax()写法

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>AJAX发送GET请求</title>
    6. </head>
    7. <body>
    8. <script type="text/javascript" src="ajax/js/jquery-3.4.1.js"></script>
    9. <script type="text/javascript">
    10.     $(function(){
    11.         //点击事件
    12.         $("#btn1").click(function(){
    13.             //发送AJAX请求
    14.             $.ajax({
    15.                 type:"get",
    16.                 url:"/ajax/JQGET",
    17.                 data:"username="+$("#username").val(),
    18.                 async:true,
    19.                 success:function(data){
    20.                     console.log(data)
    21.                     $("#div1").html(data)
    22.                 }
    23.             })
    24.         })
    25.     })
    26. </script>
    27. <button id="btn1">发送AJAX GET请求</button><br>
    28. 用户名:<input type="text" id="username"><br>
    29. <div id="div1"></div>
    30. </body>
    31. </html>

    后端随便返回点啥

    发送$.post   无参请求

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

    注意

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

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

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

  • 相关阅读:
    【etcd】的限流设计
    如何查找GNU C语言参考手册
    好用的工作日志软件
    Java程序员编写代码的技巧
    C 回调函数，接口 函数指针作为函数的参数 函数指针作为结构体成员
    vqvae简单实战，利用vqvae来提升模型向量表达
    Linux操作系统与Shell编程
    内存泄漏定位工具之 valgrind 使用
    vim学习笔记01
    某验四代滑块验证码逆向分析
  • 原文地址：https://blog.csdn.net/tiantiantbtb/article/details/132667184