jquery与ajax的基本使用

最新推荐文章于 2024-07-25 12:41:07 发布

Ogita_rina

最新推荐文章于 2024-07-25 12:41:07 发布

阅读量130

点赞数

文章标签： jquery ajax js

本文链接：https://blog.csdn.net/Ogita_rina/article/details/115977099

版权

1. jQuery

1.0 导入

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

1.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>

1.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>

1.3 事件绑定

点击事件绑定

// 方式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>

1.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>

1.5 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(){}】",
})

1.6 各种请求

准备模板

<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>

查询

// 查询所有
                $.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('失败')
                    }
                })

Ogita_rina

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery与ajax的基本使用

1. jQuery1.0 导入<script type="text/javascript" src="js/jquery-3.3.1.js"></script>1.1 页面加载成功函数<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid
复制链接

扫一扫