JQuery中Ajax操作实现

╰+哭是因爲堅強的太久メ 2023-06-24 11:27 7阅读 0赞

> 首先引入一个概念什么是Ajax?  
> 我们可以根据他的命名Ajax(Aynchronous JavaScript And XML),翻译过来就是异步的JavaScript与XML。

> 什么是异步的？  
> 客户端不需要等待服务端的响应。在服务器处理请求的过程中，客户端可以进行其他操作。  
> 实例：例如百度的搜索自动补全，还有注册的时候提醒你用户名已经被注册过。这些不重新加载整个页面的情况下，对网页的某部分进行更新

Jauery实现Ajax有三种方式：$.ajax(), $.get(), $.post()

1.  $.ajax()
    
        * 语法：$.ajax({键值对})；
        
         * 使用$.ajax()发送异步请求
        
           ```javascript
            $.ajax({
           		                url:"ajaxServlet1111" , // 请求路径
           		                type:"POST" , //请求方式
           		                //data: "username=jack&age=23",//请求参数
           		                data:{"username":"jack","age":23},
           		                success:function (data) {
           		                    alert(data);
           		                },//响应成功后的回调函数
           		                error:function () {
           		                    alert("出错啦...")
           		                },//表示如果请求响应出现错误，会执行的回调函数
           		
           		                dataType:"text"//设置接受到的响应数据的格式
           		            });
           ```
2.  $.get()：发送get请求
    
        * 语法：$.get(url,[data],[callback],[type])
           * 参数：
             * url：请求路径
             * data：请求参数
             * callback：回调函数（响应成功后要执行的）
             * type：响应结果的类型
3.  $.post()：发送post请求
    
        * 语法：$.get(url,[data],[callback],[type])
           * 参数：
             * url：请求路径
             * data：请求参数
             * callback：回调函数（响应成功后要执行的）
             * type：响应结果的类型

一个简单案例加深一下理解：只给出前端的代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        <script src="js/jquery-3.3.1.min.js"></script>
    
    
        <script>
            //在页面加载完成后
            $(function () { 
               //给username绑定blur事件
               $("#username").blur(function () { 
                   //获取username文本输入框的值
                   var username = $(this).val();
                   //发送ajax请求
                   //期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名已存在"}
                   // {"userExsit":false,"msg":"用户名可用"}
                   $.get("findUserServlet",{ username:username},function (data) { 
                       //判断userExsit键的值是否是true
    
                       // alert(data);
                       var span = $("#s_username");
                       if(data.userExsit){ 
                           //用户名存在
                           span.css("color","red");
                           span.html(data.msg);
                       }else{ 
                           //用户名不存在
                           span.css("color","green");
                           span.html(data.msg);
                       }
                   });
    
               }); 
            });
    
        </script>
    </head>
    <body>
    
    
        <form>
    
            <input type="text" id="username" name="username" placeholder="请输入用户名">
            <span id="s_username"></span>
            <br>
            <input type="password" name="password" placeholder="请输入密码"><br>
            <input type="submit" value="注册"><br>
    
        </form>
    
    </body>
    </html>