回顾
1. jq概述
是一款基于js的轻量级框架
2. jq基础语法
html中引入jq
jq与js的不同
js——》jq
$(js对象)
jq--》js
jq对象[索引]
页面加载事件
js：只能定义一次
jq：可以定义多次
3. jq选择器
基本：标签、class、id
层级：后代、并集、父子
属性：input[属性名="属性值"][]
过滤选择器：
:first
:last
:even
:odd
:eq(index)
jq遍历
jq对象.each(function(index,element){})
4. jq的dom操作
操作内容：text()、html()
操作属性：attr()、val()、prop()
操作样式：
1）jq对象.css();
2）jq对象.addClass() | jq对象.removeClass()
操作元素（标签）
$(标签)
jq对象.prepend(孩子)
jq对象.append(孩子)
jq对象.empty()
jq对象.remove()
5. jq事件
jq对象.click(function(){})
6. 综合案例
JSON&AJAX
今日目标
1. json【今天掌握】
2. ajax【web、项目一、项目二】
一 JSON【今天掌握】
1.1 JSON概述
JavaScript对象表示形式（JavaScript Object Notation）
* java对象表示形式
User user = new User();
user.setUsername("后羿");
user.setAge(23);
user.setSex("男");
...
Product product = new Product();
product.setName("小米10");
product.setDesc("1亿像素的手机小王子");
* javaScript对象表示形式
let user ={"username":"后羿","age":23,"sex":"男"}
let product = {"name":"小米10","desc":"1亿像素的手机小王子"}
这哥们可以取代XML笨重的数据结构，和xml相比：更小、更快，更易解析
json、xml作用：作为数据的载体，在网络中传输
1.2 JSON基础语法
* 对象类型
{name:value,name:value}
* 数组类型
[
{name:value,name:value},
{name:value,name:value},
{name:value,name:value}
]
* 复杂对象
{
name:value,
list:[{name:value},{},{}]
user:{name:value}
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01-JSON基础语法</title>
</head>
<body>
</body>
<script>
// 1.描述用户对象（张三丰、男、32岁）
let user = {"username":"张三丰","sex":"男","age":103};
// alert(user)
// alert(user.username +" " +user.age);
// 2.描述用户数组（张三丰、张翠山、张无忌）
let array = [
{"username":"张三丰","sex":"男","age":103},
{"username":"张翠山","sex":"男","age":32},
{"username":"张无忌","sex":"男","age":12}
];
/* for (let obj of array) {
console.log(obj.username +" "+obj.sex);
}*/
// 3.描述韦小宝（27岁，老婆、师傅）
let weiXiaoBao = {
"age":18,
"list":[
{"name":"双儿","address":"扬州"},
{"name":"皇后","address":"岛国"}
],
"shifu":{"name":"陈浩南"}
};
console.log(weiXiaoBao);
console.log(weiXiaoBao.age); // 年龄
let laopos = weiXiaoBao.list; // list集合
for (let laopo of laopos) {
console.log(laopo.name +" "+laopo.address);
}
let shifu = weiXiaoBao.shifu; // 师傅对象
console.log(shifu.name);
</script>
</html>
1.3 JSON格式转换
* JSON对象与字符串转换的相关函数
语法：
1. JSON.stringify(object) 把json对象转为字符串
2. JSON.parse(string) 把字符串转为json对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02-JSON格式转换</title>
</head>
<body>
<script>
let userStr = '{"username":"张三丰","sex":"男","age":103}';
// alert(userStr);
// alert(userStr.username) 报错
//2. JSON.parse(string) 把字符串转为json对象
let user = JSON.parse(userStr);
// alert(user.username)
//1. JSON.stringify(object) 把json对象转为字符串
let str = JSON.stringify(user);
alert(str);
</script>
</body>
</html>
二 AJAX【慢慢理解】
2.1 AJAX概述
传统网站中存在的问题
- 网速慢的情况下，页面加载时间长，用户只能等待
- 表单提交后，如果一项内容不合格，需要重新填写所有表单内容
- 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间
AJAX可以解决以上问题
ajax这哥们是浏览器提供的一套方法，在无需重新加载整个网页情况下，能够更新部分网页的技术，从而提高用户浏览网站应用的体验。
中文音译：阿贾克斯
应用场景
- 搜索框提示
- 表单数据验证
- 无刷新分页
2.3 JS原生AJAX【开发中绝对不用…】
1）运行一个java的服务器
2）测试一下服务器
http://localhost:8080/check?username=123
3）案例需求
4）代码实现【了解】
1. 创建ajax对象
let xhr = new XMLHttpRequest();
2. 告诉ajax请求方式和请求地址
xhr.open(请求方式，请求地址);
3. 发送请求
xhr.send();
4. 获取服务器返回的数据
xhr.οnlοad=function(){
xhr.responseText;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01-js的原生ajax</title>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名"> <span id="userwarn"></span>
<script>
document.getElementById('username').onblur=function () {
console.log(this.value);
// 1.创建ajax对象
let xhr = new XMLHttpRequest();
// 2.告诉ajax请求方式和请求地址
xhr.open('get','http://localhost:8080/check?username='+this.value)
// 3.发送请求
xhr.send();
// 4.获取服务器返回数据
xhr.onload=function () {
console.log(xhr.responseText);// 返回的字符串
document.getElementById('userwarn').innerText=xhr.responseText;
}
}
</script>
</body>
</html>
2.4 JQuery的Ajax插件【会用】
2.4.1 ajax函数
* 语法：
$.ajax({name:value,name:value})
* 参数：
url:请求地址
type：请求方式 （get：大小有限制、post：大小没有限制）
data：请求参数
success：请求成功时，执行的回调函数
-------
error：请求失败时，执行的回调函数
dataType：预期服务器返回的数据类型：text、json
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02-jq的ajax函数</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名"><span id="userwarn"></span>
<script>
// 给文本框绑定失去焦点事件
$('#username').blur(function () {
// 使用ajax函数发送请求
$.ajax({
url:"http://localhost:8080/check",
type:"post",
data:"username="+$(this).val(),
success:function (resp) {
// 实现局部刷新
$('#userwarn').text(resp);
},
error:function () {
alert('服务器繁忙，请稍后重试...')
},
// dataType:"json" // 相当于把 json字符串 转为了json对象
})
})
</script>
</body>
</html>
2.4.2 get函数
* 语法：
$.get(url,success);
* 参数：
url:请求地址
success：请求成功时的回调函数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03-jq的get函数</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名"><span id="userwarn"></span>
<script>
// 给文本框绑定失去焦点事件
$('#username').blur(function () {
// 使用get函数发送
let url = 'http://localhost:8080/check?username='+$(this).val();
$.get(url,function (resp) {
// 局部刷新
$('#userwarn').text(resp);
});
})
</script>
</body>
</html>
2.4.3 post函数
* 语法：
$.post(url,data,success);
* 参数：
url：请求地址
data：请求参数
success：请求成功时的回调函数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04-jq的post函数</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名"><span id="userwarn"></span>
<script>
// 给文本框绑定失去焦点事件
$('#username').blur(function () {
// 使用post函数发送请求
let url='http://localhost:8080/check';
let data='username='+$(this).val();
$.post(url,data,function (resp) {
// 局部刷新
$('#userwarn').text(resp);
})
})
</script>
</body>
</html>
2.5 同步和异步概述
使用ajax发送的是异步请求
同步和异步请求指的是，客户端和服务器交互的行为
同步：客户端发送请求后，必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
异步：客户端发送请求后，不需要等待服务器端的响应。在服务器处理的过程中，客户端可以进行其他的操作。
感知同步和异步区别
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05-同步和异步</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text">
<button id="btn">发送ajax</button>
<script>
// 给按钮绑定点击事件
$('#btn').click(function () {
// 使用ajax函数发送请求，ajax默认的是异步提交，可以改为同步（了解）
$.ajax({
url:'http://localhost:8080/sleep',
type:'get',
success:function (resp) {
alert(resp)
},
async:false// 同步提交
})
})
</script>
</body>
</html>
ajax：异步提交和页面局部刷新的技术
三 搜索案例
需求分析
服务器测试地址
http://localhost:8080/search?keyword=j
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>传智搜索</title>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<style type="text/css">
.content {
width: 643px;
margin: 200px auto;
text-align: center;
}
input[type='text'] {
width: 530px;
height: 40px;
font-size: 14px;
}
input[type='button'] {
width: 100px;
height: 46px;
background: #38f;
border: 0;
color: #fff;
font-size: 15px
}
.show {
position: absolute;
width: 535px;
height: 100px;
border: 1px solid #999;
border-top: 0;
}
</style>
</head>
<body>
<div class="content">
<img alt="" src="../img/logo.png"><br/><br/>
<input type="text" id="search" name="keyword">
<input type="button" value="搜索一下">
<div class="show" style="display: none"></div>
</div>
<script>
// 1.搜索框绑定键盘弹起事件
$('#search').keyup(function () {
// 显示div
$('.show').show();
// 2.获取用户输入的值
console.log($(this).val());
// 判断用户输入的值，小坑 js提供trim()方法
if (this.value.trim().length == 0) {
return;// 拦截代码，不在向下执行
}
// 3.使用post函数发送请求
let url='http://localhost:8080/search';
let data = 'keyword='+$(this).val();
$.post(url,data,function (resp) {
// 清空上次搜索的内容
$('.show').empty();
// 4.局部更新
console.log(resp);
for (let ele of resp) {
$('.show').append(`<div style="cursor: pointer; text-align: left;padding-left: 5px" οnmοuseοver="gaoliang(this)" οnmοuseοut="huifu(this)" οnclick="set(this)">${ele}</div>`)
}
})
})
// 高亮
function gaoliang(obj) {
$(obj).css('background-color','#f0f0f0');
}
// 恢复
function huifu(obj) {
$(obj).css('background-color','white');
}
// 设置选中的值
function set(obj) {
// alert($(obj).text())
$('#search').val($(obj).text());
// 隐藏div
// $('.show').css('display','none');
$('.show').hide();
}
</script>
</body>
</html>
扫一扫
1148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
