JSON
JavaScript对象表示形式，作为数据的载体，在网络中进行传输
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">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//描述用户对象
let user = {"username": "小明", "sex": "男", "age": 10};
user.username;
//描述用户数组/集合
let arr = [
{"username": "小明", "sex": "男", "age": 10},
{"username": "小红", "sex": "女", "age": 12},
{"username": "小花", "sex": "女", "age": 13},
];
//遍历数组，增强for
for (let obj of arr) {
console.log(obj);
console.log(obj.username);
}
//复杂对象
let xiaobao = {
"age": 18,
"list": [
{"name": "双儿", "address": "北京"},
{"name": "皇后", "address": "日本"},
],
"shifu": {"name": "南哥"}
};
console.log(xiaobao);
xiaobao.age;
let male = xiaobao.list;//集合
for(let nvre of male){
console.log(nvre);
console.log(nvre.address);
};
let shifu = xiaobao.shifu;
console.log(shifu.name);
</script>
</body>
</html>
JSON格式转换
* JSON对象与字符串转换的相关函数
语法：
1. JSON.stringify(object) 把json对象转为字符串
2. JSON.parse(string) 把字符串转为json对象
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let user = '{"username": "小明", "sex": "男", "age": 10}';//用引号引起来是一个字符
//1、将字符串转换为json对象
let use = JSON.parse(user);
console.log(use.username);
//2、将json对象转换为字符串
let s = JSON.stringify(use);
alert(s);
</script>
</body>
</html>
Ajax
Ajax可以请求并获取服务器的数据,来完成与服务的通信，在无需重新加载整个网页的情况下，能够更新部分网页的技术，提高用户体验
适用场景
搜索框提示、表单数据验证、无刷新分页
Jquery的Ajax插件
ajax函数
$.ajax({json对象格式})
参数：
url：请求地址、type：请求方式（get post）、data：请求参数、success：请求成功时，执行的回调函数
error：请求失败时，执行的回调函数、dataType：预期服务器返回的数据类型
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text" id="username" 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);
}
})
})
</script>
</body>
</html>
get函数
$.get(url,callback)
参数：
url：请求地址、callback：请求成功时，执行的回调函数
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text" id="username" placeholder="请输入用户名"><span id="userwarn"></span>
<!--
* 语法：
$.get(url,success);
* 参数：
url:请求地址
success：请求成功时的回调函数
-->
<script>
//给文本框绑定失去焦点事件
$('#username').blur(function () {
//使用get函数发送请求
let url= "http://localhost:8080/check?username="+$(this).val();
$.get(url,function(resp){
//实现局部刷新
$('#userwarn').text(resp);
})
})
</script>
</body>
</html>
post函数
$.post(url,data,success)
参数：
url：请求地址、data：请求参数、success：请求成功时，执行的回调函数
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text" id="username" placeholder="请输入用户名"><span id="userwarn"></span>
<!--
* 语法：
$.post(url,data,success);
* 参数：
url：请求地址
data：请求参数
success：请求成功时的回调函数
-->
<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>
同步和异步处理
使用ajax发送的是异步请求
同步和异步请求指的是，客户端和服务器交互的行为
同步：客户端发送请求后，必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
异步：客户端发送请求后，不需要等待服务器端的响应。在服务器处理的过程中，客户端可以进行其他的操作。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>同步和异步</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>
案例练习
需求：搜索案例
分析：
1.、给搜索框绑定键盘抬起事件 keyup()
2、获取用户输入的值 val()函数
3、通过ajax对象发送请求post()函数
4、实现局部更新
<!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>
//给搜索框绑定键盘弹起事件
$('#search').keyup(function () {
//显示div
$('.show').show();
//alert($(this).val());})
//判断一下输入的内容
if (this.value.trim().length == 0) {
$('.show').hide();//div中没有内容时，隐藏div
return;
}
// //使用post函数
let url = 'http://localhost:8080/search';
let data = "keyword=" + $(this).val();
$.post(url, data, function (resp) {
//清空上次搜索内容
$('.show').empty();
console.log(resp);
//局部更新
//遍历resp，将内容添加到div中
for (let ele of resp) {
$('.show').append(`<div οnmοuseοver="yiru(this)" οnmοuseοut="yichu(this)"οnclick="dianji(this)" style="cursor: pointer;text-align: left;padding-left: 5px"> ${ele}</div>`)
}
})
})
//鼠标移入
function yiru(obj) {
$(obj).css('background-color', '#f0f0f0')
}
//鼠标移出
function yichu(obj) {
$(obj).css('background-color', 'white')
}
//设置选中的值绑定一个鼠标点击事件
function dianji(obj) {
$('#search').val($(obj).text())
//选中后隐藏div
$('.show').hide();
}
</script>
</body>
</html>
