JQuery前端ajax的入门和基本使用

2. jQuery 的ajax的入门和使用

2.0 导入

<!-- 导入jquery -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

2.1 页面加载成功函数

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导入jquery -->
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <!-- 页面加载成功 -->
    <script>
        // 方式1:简写方式
        // 函数名( fn );   --->  function(){....}
        $(function(){
            alert('弹出框')
        });

        // 方式2:标准写法
        $(document).ready(function(){
            alert('弹出框2.。。。。')
        });

        // 方式3: $ == jQuery ,都是函数名
        jQuery(function(){
            alert('33333')
        })
    </script>
</head>
<body>
    
</body>
</html>

2.2 选择器

// id选择器  <div id="值">
$("#值").函数...
// 标签选择器(元素选择器)  <div>
$("标签名").函数...
// 类选择器   <div class="值 值2">
$(".值").函数...
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导入 -->
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <!-- 页面加载 -->
    <script>
        $(function(){
            // id选择器
            $("#my1").height("100px");          //设置高

            // 元素选择器 (所有div)
            $("div").width("100px");           //设置宽

            // 类选择器
            $(".myclass").css("background-color","green");  //设置背景颜色
        });
    </script>
</head>
<body>
    <div id="my1" class="myclass"></div>
</body>
</html>

2.3 事件绑定

  • 常见事件

    //内网:
    	http://192.168.84.36:7777/
    //外网:
    	http://data.javaliang.com/
    
  • 点击事件绑定

// 方式1:直接使用对应事件
// 绑定点击事件
$("#id").click( 函数 )

// 实例
$("#id").click(function(){
    //代码
})

// 方式2:使用on函数进行绑定
$("#id").on("click", 函数 );

// 实例
$("#id").on("click" , function() {
    
})
  • 实例
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导入 -->
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script>
        // 页面加载
        $(function(){
            //点击事件
            $("#bid").click(function(){
                alert("你还真点!!!");
            })
        })
        
    </script>
</head>
<body>
    <input id="bid" type="button" value="点我试试"/>
</body>
</html>

2.4 常见函数

函数名描述
val() 、val(“值”)获取值、设置值
text以文本的方式获取、设置标签体
attr(k [, v] )获得、设置标签属性
removeAttr(k)移除属性
append()追加
  • 实例
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导入 -->
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script>
        // 页面加载
        $(function(){
            // 文本框的失去焦点事件
            $("#userinput").blur(function(){
                // 获得文本框内容
                var v = $("#userinput").val();
                // 判断
                if(v == "jack"){
                    // 成功提示
                    $("#spanid").text("用户名可用")
                    // 控制按钮:可用
                    $("#bid").removeAttr("disabled")
                } else {
                    // 失败提示
                    $("#spanid").text("用户名不可用")
                    // 控制按钮:不可用
                    $("#bid").attr("disabled","disabled");
                }

            })
        })
        
        
    </script>
</head>
<body>
    <input id="userinput" type="text"> <br/>
    <span id="spanid"></span> <br/>
    <!-- 可用 或 不可用 -->
    <input id="bid" type="button" value="提交">

</body>
</html>

2.5 ajax语法

2.5.1 了解接口

  • http://data.javaliang.com/swagger-ui.html#/271692531125968254542550921475

2.5.2 jquery ajax 标准代码

// {}  表示 javascript对象,内容“键值对” , 
{
    "键1":"值",
    "键2":"值"
}
// jquery ajax 函数
//语法: $.ajax( js对象 )
$.ajax({
    "url":"请求路径",
    "type":"请求方式【GET/POST/PUT/DELETE】",
    "contentType":"请求的数据类型【application/json;charset=UTF-8】",
    "data": "请求的数据",
    "dataType":"响应的数据类型【json】",
    "success":"成功的处理函数【function(data){}】",
    "error":"失败的处理函数【function(){}】",
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-doLM8IfQ-1601339956269)(assets/image-20200914145806449.png)]

2.5.3 各种请求

  • 准备模板
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导入 -->
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script>
        // 页面加载
        $(function(){
            $("#bid1").click(function(){
                // 查询所有

            });

            $("#bid2").click(function(){
                // 添加
                
            });

            $("#bid3").click(function(){
                // 修改
                
            });


            $("#bid4").click(function(){
                // 删除
                
            });


            $("#bid5").click(function(){
                // 查询详情
                
            });


        })
        
        
    </script>
</head>
<body>
    <input id="bid1" type="button" value="查询所有"> <br/>
    <input id="bid2" type="button" value="添加"> <br/>
    <input id="bid3" type="button" value="修改"> <br/>
    <input id="bid4" type="button" value="删除"> <br/>
    <input id="bid5" type="button" value="查询详情"> <br/>

</body>
</html>

2.6 ajax的基本使用(增 删 改 查)

  • 查询
// 查询所有
                $.ajax({
                    "url": "http://data.javaliang.com/data/jack/student",
                    "type": "get",
                    "contentType": "application/json;charset=UTF-8",
                    "dataType": "json",
                    "success": function(data){
                        alert('查询成功')
                        console.info(data)
                    },
                    "error": function(){
                        alert('查询失败')
                    }
                })

  • 添加
// 准备数据
                var student = {
                    "id": "s003",
                    "name": "李四",
                    "age" : "18",
                    "edu" : "大班"
                }
                // 添加
                $.ajax({
                    "url":"http://data.javaliang.com/data/jack/student",
                    "type":"post",
                    "contentType":"application/json;charset=UTF-8",
                    "data": JSON.stringify(student)  ,
                    "dataType":"json",
                    "success": function(data) {
                        alert('添加成功')
                        console.info(data)  //将数据打印到浏览器的控制台
                    },
                    "error":function() {
                        alert('失败')
                    }
                })
  • 修改
// 准备数据
                var student = {
                    "id": "s003",
                    "name": "李四2",
                    "age" : "182",
                    "edu" : "大班2"
                }
                // 修改
                $.ajax({
                    "url":"http://data.javaliang.com/data/jack/student",
                    "type":"put",
                    "contentType":"application/json;charset=UTF-8",
                    "data": JSON.stringify(student)  ,
                    "dataType":"json",
                    "success": function(data) {
                        alert('修改成功')
                        console.info(data)  //将数据打印到浏览器的控制台
                    },
                    "error":function() {
                        alert('失败')
                    }
                })
  • 删除
// 删除
                $.ajax({
                    "url":"http://data.javaliang.com/data/jack/student/s003",
                    "type":"delete",
                    "contentType":"application/json;charset=UTF-8",
                    "dataType":"json",
                    "success": function(data) {
                        alert('删除成功')
                        console.info(data)  //将数据打印到浏览器的控制台
                    },
                    "error":function() {
                        alert('失败')
                    }
                })
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页