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('失败')
}
})