一 JSON
1.1 JSON概述
-
JSON(JavaScript Object Notation):是一种轻量级的数据交换格式。
-
它是基于 ECMAScript 规范的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。
-
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写,同时也易于计算机解析和生成,并有效的 提升网络传输效率。
* 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亿像素的手机小王子"}
json可以取代XML笨重的数据结构,和xml相比:更小、更快,更易解析
1.2 JSON基础语法
json的语法主要有两种:
1. 对象 { }
2. 数组 [ ]
(1) 对象类型
{name:value,name:value}
(2) 数组类型
[
{name:value,name:value},
{name:value,name:value},
{name:value,name:value}
]
(3) 复杂对象
{
name:value,
list:[{name:value},{},{}]
user:{name:value}
}
注意:
1. 其中name必须是string类型
2. value必须是以下数据类型之一:
字符串
数字
对象(JSON 对象)
数组
布尔
Null
3. JSON 中的字符串必须用双引号包围。(单引号不行!)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01-JSON基础语法</title>
</head>
<body>
</body>
<script>
/*
* JSON: 对象{}, 数组[]
* 1. 对象:
* {name:value,name:value}
*
* 2. 数组: 对应java中的List<User>
* [
* {name:value,name:value},
* {name:value,name:value}
* ]
* 3. 复杂: 对应java的对象或Map<String,Object>
* {
* name : value,
* name : [],
* name : {}
* }
*
* 注意:
* 1. 其中name必须是string
* 2. value 必须是以下之一
* string,number,boolean,json对象,json数组,null
* 3. 注意:json字符串必须双引号包围
* */
//1. json对象
let jsonObj = {"username":"张三丰","sex":"男","age":103,"married" : true}
// value = 对象.name
console.log(jsonObj.username + "," + jsonObj.married)
//2. json数组
let jsonArray1 = ["张三","李四",true] // 这也是json,这是比较少见
let jsonObj1 = {"username":"张三丰","sex":"男","age":103}
let jsonObj2 = {"username":"张翠山","sex":"男","age":32}
let jsonObj3 = {"username":"张无忌","sex":"男","age":12}
let jsonArray2 = [jsonObj1,jsonObj2,jsonObj3] // 在java中: List<User>
console.log(jsonArray2[1].age) //32
for (let element of jsonArray2) {
console.log(element.username + "," + element.age)
}
//3. json复杂对象
let jsonComplex = {
"username" : "韦小宝",
"age" : 18,
"wives" : [
{"name" : "双儿","address" : "扬州"},
{"name" : "皇后","address" : "岛国"}
],
"master":"陈浩南"
}
console.log(jsonComplex.username + ","+ jsonComplex.master)
console.log(jsonComplex.wives)
</script>
</html>
1.3 JSON格式转换
JSON对象与字符串转换的相关函数
语法:
-
JSON.stringify(object) 把json对象转为字符串
-
JSON.parse(string) 把字符串转为json对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02-JSON格式转换</title>
</head>
<body>
<script>
//1. JSON.stringify(object) 把json对象转为字符串(不重要)
// 原因是: 浏览器发送请求数据的时候,自动转成string
//2. JSON.parse(string) 把字符串转为json对象 (重要的!!)
/*
* 需求: 后端(java)给前端发送的json数据
1. json在java中是string
2. 前端(js)拿到string格式的json, 先将string -> object,后解析
3. 因为json在js中是对象
* */
//前端接收到后端发送过来的数据(类型:string)
// 注意: 里面是json必须双引,外面就用单引
// let resultData = "{\"result\" : \"failed\" , \"msg\" : \"用户名不存在或密码错误\"}"
let resultData = '{"result" : "failed" , "msg" : "用户名不存在或密码错误"}'
console.log(resultData)
console.log(typeof resultData) //string
console.log(resultData.msg) //string无法这样解析,undefined
//json格式的字符串转成对象
let resultObj = JSON.parse(resultData)
// let resultObj = eval("("+resultData+")") // 也可以转换,在变量外面加上小括号!!!
console.log(resultObj) //
console.log(typeof resultObj) // object
console.log(resultObj.msg) // 正常解析
//json对象转成字符串 (知道即可)
let resultString = JSON.stringify(resultObj)
console.log(resultString)
console.log(typeof resultString) //string
</script>
</body>
</html>
1.4JSON转换工具的介绍
-
我们除了可以在 JavaScript 中来使用 JSON 以外,在 JAVA 中同样也可以使用 JSON。
-
JSON 的转换工具是通过 JAVA 封装好的一些 JAR 工具包。
-
可以将 JAVA 对象或集合转换成 JSON 格式的字符串,也可以将 JSON 格式的字符串转成 JAVA 对象。
-
Jackson:开源免费的 JSON 转换工具,SpringMVC 转换默认使用 Jackson。
-
- 导入 jar 包。
- 创建核心对象。
- 调用方法完成转换。
-
1.41 对象转 JSON, JSON 转对象
/*
JSON转换工具的使用
*/
public class ObjectMapperTest {
private ObjectMapper mapper = new ObjectMapper();
/*
1.User对象转json, json转User对象
json字符串 = {"name":"张三","age":23}
user对象 = User{name='张三', age=23}
*/
@Test
public void test01() throws Exception{
//User对象转json
User user = new User("张三",23);
String json = mapper.writeValueAsString(user);
System.out.println("json字符串:" + json);
//json转User对象
User user2 = mapper.readValue(json, User.class);
System.out.println("java对象:" + user2);
}
}
1.42Map转 JSON, JSON 转 Map
/*
2.map<String,String>转json, json转map<String,String>
json字符串 = {"姓名":"张三","性别":"男"}
map对象 = {姓名=张三, 性别=男}
*/
@Test
public void test02() throws Exception{
//map<String,String>转json
HashMap<String,String> map = new HashMap<>();
map.put("姓名","张三");
map.put("性别","男");
String json = mapper.writeValueAsString(map);
System.out.println("json字符串:" + json);
//json转map<String,String>
HashMap<String,String> map2 = mapper.readValue(json, HashMap.class);
System.out.println("java对象:" + map2);
}
1.43 Map转 JSON, JSON 转 Map
/*
3.map<String,User>转json, json转map<String,User>
json字符串 = {"黑马一班":{"name":"张三","age":23},"黑马二班":{"name":"李四","age":24}}
map对象 = {黑马一班=User{name='张三', age=23}, 黑马二班=User{name='李四', age=24}}
*/
@Test
public void test03() throws Exception{
//map<String,User>转json
HashMap<String,User> map = new HashMap<>();
map.put("黑马一班",new User("张三",23));
map.put("黑马二班",new User("李四",24));
String json = mapper.writeValueAsString(map);
System.out.println("json字符串:" + json);
//json转map<String,User>
HashMap<String,User> map2 = mapper.readValue(json,new TypeReference<HashMap<String,User>>(){});
System.out.println("java对象:" + map2);
}
1.44 List转 JSON, JSON 转 List
/*
4.List<String>转json, json转 List<String>
json字符串 = ["张三","李四"]
list对象 = [张三, 李四]
*/
@Test
public void test04() throws Exception{
//List<String>转json
ArrayList<String> list = new ArrayList<>();
list.add("张三");
list.add("李四");
String json = mapper.writeValueAsString(list);
System.out.println("json字符串:" + json);
//json转 List<String>
ArrayList<String> list2 = mapper.readValue(json,ArrayList.class);
System.out.println("java对象:" + list2);
}
1.45 List转 JSON, JSON 转 List
/*
5.List<User>转json, json转List<User>
json字符串 = [{"name":"张三","age":23},{"name":"李四","age":24}]
list对象 = [User{name='张三', age=23}, User{name='李四', age=24}]
*/
@Test
public void test05() throws Exception{
//List<User>转json
ArrayList<User> list = new ArrayList<>();
list.add(new User("张三",23));
list.add(new User("李四",24));
String json = mapper.writeValueAsString(list);
System.out.println("json字符串:" + json);
//json转List<User>
ArrayList<User> list2 = mapper.readValue(json,new TypeReference<ArrayList<User>>(){});
System.out.println("java对象:" + list2);
}
1.5 JSON小结
-
**Jackson:**开源免费的 JSON 转换工具,SpringMVC 转换默认使用 Jackson。
-
可以将 JAVA 对象或集合转换成 JSON 格式的字符串,也可以将 JSON 格式的字符串转成 JAVA 对象。
-
常用类
-
二 AJAX
2.1 AJAX概述
传统网站中存在的问题
-
网速慢的情况下,页面加载时间长,用户只能等待
-
表单提交后,如果一项内容不合格,需要重新填写所有表单内容
-
页面跳转,重新加载页面,造成资源浪费,增加用户等待时间
AJAX可以解决以上问题
AJAX(Asynchronous JavaScript and XML 异步)是浏览器提供的一套方法,在无需重新加载整个网页情况下,能够更新部分网页的技术,从而提高用户浏览网站应用的体验。
AJAX 通过浏览器与服务器进行少量数据交换,就可以使网页实现异步更新。也就是在不重新加载整个页 面的情况下,对网页的部分内容进行局部更新。
中文音译:阿贾克斯
应用场景
- 搜索框提示
- 表单数据验证(验证数据是否合法: 用户名已被注册)
- 无刷新分页(网页不断往下滚动,会不断的发起请求更新数据 : 京东,百度图片)
2.2 JS原生AJAX【了解,开发中不用…】
代码实现【了解】
# js原生的ajax (不经过任何封装)
1. 创建ajax对象
let xhr = new XMLHttpRequest();
2. 告诉ajax请求方式和请求地址
xhr.open(请求方式,请求地址);
3. 发送请求
xhr.send();
4. 获取服务器返回的数据
xhr.onload=function(){
xhr.responseText;
}
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置请求和响应的乱码
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
//1.获取请求参数
String username = req.getParameter("username");
//模拟服务器处理请求需要5秒钟
/*try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}*/
//2.判断姓名是否已注册
if("zhangsan".equals(username)) {
resp.getWriter().write("<font color='red'>用户名已注册</font>");
}else {
resp.getWriter().write("<font color='green'>用户名可用</font>");
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<form autocomplete="off">
姓名:<input type="text" id="username">
<span id="uSpan"></span>
<br>
密码:<input type="password" id="password">
<br>
<input type="submit" value="注册">
</form>
</body>
<script>
//1.为姓名绑定失去焦点事件
document.getElementById("username").onblur = function() {
//2.创建XMLHttpRequest核心对象
let xmlHttp = new XMLHttpRequest();
//3.打开链接
let username = document.getElementById("username").value;
xmlHttp.open("GET","userServlet?username="+username,true);
//xmlHttp.open("GET","userServlet?username="+username,false);
//4.发送请求
xmlHttp.send();
//5.处理响应
xmlHttp.onreadystatechange = function() {
//判断请求和响应是否成功
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//将响应的数据显示到span标签
document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
}
}
}
</script>
</html>
2.3原生JS实现AJAX详解
-
核心对象:XMLHttpRequest
用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
-
打开链接:open(method,url,async)
method:请求的类型 GET 或 POST。
url:请求资源的路径。
async:true(异步) 或 false(同步)。
-
发送请求:send(String params)
params:请求的参数(POST 专用)。
-
处理响应:onreadystatechange
readyState:0-请求未初始化,1-服务器连接已建立,2-请求已接收,3-请求处理中,4-请求已完成,且响应已就绪。
status:200-响应已全部 OK。
-
获得响应数据形式
responseText:获得字符串形式的响应数据。
responseXML:获得 XML 形式的响应数据。
2.3 JQuery的Ajax插件【会用】
jquery作为一个优秀的js框架, 自然也会对ajax的复杂的api进行封装:
2.3.1 get/post 函数(要背下来)
* 1. get请求方式
$.get(url, [data], [callback], [type])
1. url : 请求的服务器端url地址
2. data : 发送给服务器端的请求参数,格式可以是key=value,也可以是json对象
3. callback: 当请求成功后的回掉函数,可以在函数体中编写我们的逻辑代码
4. type : 预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defau等
(默认text: 普通文本,后续json主要)
* 2. post请求方式 :
$.post(url, [data], [callback], [type])
只需要将get函数换成post即可(参数含义同上)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03-jq的get函数</title>
<!--
jquery已经导入了!!!
-->
<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>
/*
* * 1. get请求方式
$.get(url, [data], [callback], [type]) -> []表示可以没有
1. url : 请求地址
2. data : 请求参数(text,json)
3. callback: 回调函数(ajax请求发送之后,服务器成功响应的回调函数)
function(result){ 其中result 是服务器的响应数据 }
4. type : 预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defau等 (默认text: 普通文本,后续json主要)
如果不写,默认text(纯文本,就是字符串)
* 2. post请求方式 :
$.post(url, [data], [callback], [type])
只需要将get函数换成post即可(参数含义同上)
解释:
1. url 请求地址: 服务器的地址?参数
(如果请求方式是get,可以不拆开?参数 , 如果是post,必须拆开)
2. data : 请求参数(text,json)
text(纯文本,字符串) : name1=value1&name2=value2...
json : {name1: value1,name2:value2}
3. callback : 服务器成功响应之后的调用
函数中有个参数 : 服务器响应的数据
(如果访问服务器失败, 这个函数不会执行)
4. type : 响应数据的类型(常用text,json)
如果不写,默认text
http协议的两种请求方式
1. get
a. 将参数拼接进url
b. 可能体现在浏览器的地址栏, 不安全, 传输的数据长度有限制
2. post
a. 参数不会拼接进url(是放在请求体了)
b. 不会体现在浏览器的地址栏, 安全 , 传输的数据没有限制
* */
//注册失去焦点事件
$("#username").blur(function () {
//先获取文本输入框中的内容
let value = $("#username").val()
//用jquery的api发送ajax请求
// let url = "http://localhost:8080/check?username="+value // 这是js刚才用的
let url = "http://localhost:8080/check" // 只保留?前面的
let data = "username=" + value // 请求参数 text格式
// let data = {"username" : value} // 请求参数 json格式
let cb = function(result){ // 服务器成功响应了会执行这个函数
console.log(result) // 服务器响应的数据
}
let type = "text" // 指定响应数据的类型(常用text,json)
$.get(url,data,cb,type) // get请求
// $.post(url,data,cb,type) // post请求
})
</script>
</body>
</html>
2.3.2 ajax函数(看得懂,会抄)
-
语法:
$.ajax({name:value,name:value}) -
参数:
- url : 请求的服务器端url地址
- async : (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,设置false
- data : 发送到服务器的数据,可以是键值对形式,也可以是js对象形式
- type : (默认: “GET”) 请求方式 (“POST” 或 “GET”)
- dataType : 预期的返回数据的类型(默认text,常用json)
- success : 请求成功后的回调函数
- error : 请求失败时调用此函数
这些参数,是可以选择性的写
-
总结: 在实际使用中, 比get/post请求多考虑了失败的情况
<!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>
/*
* * 语法:
$.ajax(settings)
settings是js对象(不是json)
settings = {name:value,name:value}
name 可以不加双引号,value可以写function(json不允许)
* 参数:
1. url : 请求的服务器端url地址
2. async : (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,设置false
3. data : 发送到服务器的数据,可以是键值对形式,也可以是js对象形式
4. type : (默认: "GET") 请求方式 ("POST" 或 "GET")
5. dataType : 预期的返回数据的类型(默认text,常用json)
6. success : 请求成功后的回调函数
7. error : 请求失败时调用此函数
* 总结: 在实际使用中, 比get/post请求多考虑了失败的情况
* */
$("#username").blur(function () {
//获取文本框输入的值
let value = $("#username").val()
// 使用ajax函数发送请求
let settings = {
url:"http://localhost:8080/check", // 请求地址
type:"get", // 请求方式,默认是get,一般不是get/post
data:"username="+value, // 请求参数(text,json)
success:function (resp) { // 成功响应的回调, resp是响应数据
// 实现局部刷新
$('#userwarn').text(resp);
},
error:function () { //失败的回调 : 如果访问失败,会执行这个函数
alert('网络信号不好,服务器繁忙,请稍后重试...')
},
dataType:"text", // 响应数据的格式(默认text,可选json)
async:true // 异步提交(待会讲,默认是true 异步,一般只写true)
}
$.ajax(settings)
})
</script>
</body>
</html>
2.4 同步和异步概述
使用ajax发送的是异步请求
同步和异步请求指的是,客户端和服务器交互的行为
同步请求:客户端发送请求后,必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
异步请求:客户端发送请求后,不需要等待服务器端的响应。在服务器处理的过程中,客户端可以进行其他的操作。
http://localhost:8080/sleep
localhost -> 127.0.0.1 (本机)
如果直接访问,默认同步请求,需要等待5秒才会响应,在此期间什么时候都不能做
(目前,网页发起的请求都是同步请求)
使用ajax技术实现异步提交,需要等待5秒才会响应,但是在此期间可以做其他事情
#同异步概念
1. 同步: 你先做A任务,只有A任务做完了,才能做B任务
你去找你女朋友一起吃饭, 你女朋友让你等一会儿(30分钟),等到你女朋友好了,再一起去吃饭(java:单线程)
2. 异步: 你先做A任务,A任务还没结束,你就能B任务
你去找你女朋友一起吃饭, 你女朋友让你等一会儿(30分钟),可以边吃边等(java: 多线程)
感知同步和异步区别
<!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 () {
/* let settings = {
url : "http://localhost:8080/sleep",
type : "get",
async : false, //async默认=true,false为同步
success : function (result) {
alert(result)
}
}
$.ajax(settings)*/
let url = "http://localhost:8080/sleep"
let data = "" // 没有参数,也可以不写
let cb = function(result){ //成功的回调
alert(result)
}
//默认async=true,异步请求
$.get(url,data,cb)
})
</script>
</body>
</html>
ajax:异步提交和页面局部刷新的技术
2.5 AJAX小结
- **AJAX(Asynchronous JavaScript And XML):**异步的 JavaScript 和 XML。
- 通过浏览器与服务器进行少量数据交换,就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下,对网页的部 分内容进行局部更新。
- 同步和异步
- 同步:服务器端在处理过程中,无法进行其他操作。
- 异步:服务器端在处理过程中,可以进行其他操作。
- GET 方式实现:$.get();
- POST 方式实现:$.post();
- url:请求的资源路径。
- data:发送给服务器端的请求参数,格式可以是key=value,也可以是 js 对象。
- callback:当请求成功后的回调函数,可以在函数中编写我们的逻辑代码。
- type:预期的返回数据的类型,取值可以是 xml, html, js, json, text等。
- 通用方式实现:$.ajax();
- url:请求的资源路径。
- async:是否异步请求,true-是,false-否 (默认是 true)。
- data:发送到服务器的数据,可以是键值对形式,也可以是 js 对象形式。
- type:请求方式,POST 或 GET (默认是 GET)。
- dataType:预期的返回数据的类型,取值可以是 xml, html, js, json, text等。
- success:请求成功时调用的回调函数。
- error:请求失败时调用的回调函数。
三 搜索案例
需求分析
服务器测试地址
http://localhost:8080/search?keyword=j
keyword=后面可以输入j和p都有相应提示, 其他内容有默认提示
代码实现
<!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"></div>
</div>
<script >
/*
* 1. 文本输入框的事件: 键盘弹起 onkeyup
* */
$("#search").keyup(function () {
//把之前隐藏的小舌头显示出来
$(".show").css("display","block")
let kw = $("#search").val()
// console.log(kw)
//http://localhost:8080/search?keyword=j
let url = "http://localhost:8080/search"
let data = "keyword="+kw
//2. 发送异步请求
$.get(url,data,function (result) {
// console.log(result) // 返回的是一个数组
// 坑: 在追加之前,先置空
$(".show").empty()// 杀孩子
//3. 结果显示在小舌头(内部追加)
for (let element of result) {
// $(".show").append(element) // 不换行
// this: 触发事件的当前div (普通函数注册,js对象)
// append 内部是innerHTML 追加的
$(".show").append(`<div style="text-align: left" οnmοuseοver="over(this)" οnmοuseοut="out(this)" οnclick="cli(this)">${element}</div>`) //换行(反引号)
}
})
})
</script>
<script >
function over(div) {
$(div).css("color" , "pink")
}
function out(div) {
$(div).css("color" , "black")
}
function cli(div) {
//被点击了,div的内部文本放到搜索框中
$("#search").val(div.innerText)
//隐藏小舌头
$(".show").css("display","none")
}
</script>
</body>
</html>
搜索案例升级
案例分析
- 页面
-
- 为用户名输入框绑定鼠标点击事件。
- 获取输入的用户名数据。
- 判断用户名是否为空。
- 如果为空,则将联想提示框隐藏。
- 如果不为空,则发送 AJAX 请求,并将响应的数据显示到联想框。
-
- 控制层
-
- 获取请求参数。
- 调用业务层的模糊查询方法。
- 将返回的数据转成 JSON,并响应给客户端。
-
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户搜索</title>
<style type="text/css">
.content {
width: 643px;
margin: 100px 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;
display: none;
}
</style>
</head>
<body>
<form autocomplete="off">
<div class="content">
<img src="img/logo.jpg">
<br/><br/>
<input type="text" id="username">
<input type="button" value="搜索一下">
<div id="show" class="show"></div>
</div>
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$("#username").keyup(function () {
let username= $("#username").val();
if (username==null||username==""){
$("#show").hide();
return;
}
$.ajax({
url:"/userServlet",
data:{"username":username},
type:"POST",
success:function (data) {
$("#show").empty();
$.each(data,function (index,element) {
$("#show").append("<div>"+element.name+"<div>");
$("#show").show();
})
},
dataType:"json"
});
})
</script>
</html>
控制层-java
@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置请求和响应的编码
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
//1.获取请求参数
String username = req.getParameter("username");
//2.调用业务层的模糊查询方法得到数据
UserService service = new UserServiceImpl();
List<User> users = service.selectLike(username);
//3.将数据转成JSON,响应到客户端
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(users);
resp.getWriter().write(json);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
}
分页(瀑布无限加载数据分页)
如何确定当前显示的数据已经浏览完毕?
- 公式:(滚动条距底部的距离 + 滚动条上下滚动的距离 + 当前窗口的高度) >= 当前文档的高度
- 当前文档高度:存储10条数据,100px。
- 滚动条距底部的距离:1px。
- 当前窗口的高度:80px。
- 滚动条上下滚动的距离:>=19px。
- 实现思路
- 页面
- 定义发送请求标记。
- 定义当前页码和每页显示的条数。
- 定义滚动条距底部的距离。
- 设置页面加载事件。
- 为当前窗口绑定滚动条滚动事件。
- 获取必要信息(当前窗口的高度,滚动条上下滚动的距离,当前文档的高度)。
- 计算当前展示数据是否浏览完毕。
- 判断请求标记是否为 true。
- 将请求标记置为 false,当前异步操作完成前,不能重新发起请求。
- 根据当前页和每页显示的条数来请求查询分页数据。
- 当前页码+1。
- 服务器
- 获取请求参数(当前页,每页显示的条数)。
- 根据当前页码和每页显示的条数,调用业务层的方法,得到分页 Page 对象。
- 将得到的数据转为 json。
- 将数据响应给客户端。
- 页面
各种包
html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站首页</title>
<link rel="stylesheet" href="css/tt.css">
</head>
<body>
<div class="top">
<span class="top-left">下载APP</span>
<span class="top-left"> 北京 晴天</span>
<span class="top-right">更多产品</span>
</div>
<div class="container">
<div class="left">
<a>
<img src="img/logo.png"><br/>
</a>
<ul>
<li>
<a class="channel-item active" href="#">
<span>
推荐
</span>
</a>
</li>
<li><a class="channel-item" href="#">
<span>
视频
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
热点
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
直播
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
图片
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
娱乐
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
游戏
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
体育
</span>
</a></li>
</ul>
</div>
<div class="center">
<ul class="news_list">
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选,警告民主党参选人须“基于现实11”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选,警告民主党参选人须“基于现实22”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选,警告民主党参选人须“基于现实33”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选,警告民主党参选人须“基于现实44”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选,警告民主党参选人须“基于现实55”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选,警告民主党参选人须“基于现实66”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选,警告民主党参选人须“基于现实77”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选,警告民主党参选人须“基于现实88”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选,警告民主党参选人须“基于现实99”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选,警告民主党参选人须“基于现实1010”
<hr>
</a>
</div>
</li>
</ul>
<div class="loading" style="text-align: center; height: 80px">
<img src="img/loading2.gif" height="100%">
</div>
<div class="content">
<div class="pagination-holder clearfix">
<div id="light-pagination" class="pagination"></div>
</div>
</div>
<div id="no" style="text-align: center;color: red;font-size: 20px"></div>
</div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//1.定义发送请求标记
let send=true;
//2.定义当前页码和每页显示的条数
let start=1;
let pageSize=10;
//3.定义滚动条距底部的距离
let bottom=1;
//4.设置页面加载事件
$(window).scroll(function () {
let windowHeight = $(window).height();
let scrollTop = $(window).scrollTop();
let documentHeight = $(document).height();
if ((windowHeight+scrollTop+bottom)>documentHeight){
if (send=true){
send=false;
queryByPage(start,pageSize);
start++;
}
}
});
function queryByPage(start,pageSize) {
$(".loading").show();
$.ajax({
url:"newsServlet",
type:"POST",
data:{"start":start,"pageSize":pageSize},
dataType:"json",
success:function (data) {
if (data.length==0){
$(".loading").hide();
$("#no").html("到底了,大兄弟");
return;
}
$(".loading").hide();
$.each(data,function (index, element) {
$(".news_list").append(
" <li>\n" +
" <div class=\"title-box\">\n" +
" <a href=\"#\" class=\"link\">\n" +
element.title+
" <hr>\n" +
" </a>\n" +
" </div>\n" +
" </li>"
);
});
send=true;
}
})
}
</script>
</html>
java代码
import com.fasterxml.jackson.databind.ObjectMapper;
import com.github.pagehelper.Page;
import com.itheima.service.NewsService;
import com.itheima.service.impl.NewsServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/newsServlet")
public class NewsServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置请求和响应的编码
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
//1.获取请求参数
String start = req.getParameter("start");
String pageSize = req.getParameter("pageSize");
//2.根据当前页码和每页显示的条数来调用业务层的查询方法,得到分页Page对象
NewsService service = new NewsServiceImpl();
Page page = service.pageQuery(Integer.parseInt(start), Integer.parseInt(pageSize));
//3.将得到的数据转为JSON
String json = new ObjectMapper().writeValueAsString(page);
try {
Thread.sleep(1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//4.将数据响应给客户端
resp.getWriter().write(json);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
}
升级分页-点击按钮
-
案例效果和环境准备
-
按钮效果
-
环境准备
- 使用已完善的ajax3项目
- 复制index.html更名为index2.html,并去掉原js中的方法
-
-
案例的分析
-
页面
1.引入分页插件的样式文件和 js 文件。
- 定义当前页码和每页显示的条数。
- 调用查询数据的函数。
- 定义请求查询分页数据的函数,发起 AJAX 异步请求。
- 为分页按钮区域设置页数参数(总页数和当前页)。
- 为分页按钮绑定单击事件,完成上一页下一页查询功能。
-
服务器
-
- 获取请求参数。
- 根据当前页码和每页显示的条数,调用业务层的方法,得到分页 Page 对象
- 封装 PageInfo 对象。
- 将得到的数据转为 json。
- 将数据响应给客户端。
-
-
-
案例的实现
- html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站首页</title>
<link rel="stylesheet" href="css/tt.css">
<link rel="stylesheet" href="css/simplePagination.css">
</head>
<body>
<div class="top">
<span class="top-left">下载APP</span>
<span class="top-left"> 北京 晴天</span>
<span class="top-right">更多产品</span>
</div>
<div class="container">
<div class="left">
<a>
<img src="img/logo.png"><br/>
</a>
<ul>
<li>
<a class="channel-item active" href="#">
<span>
推荐
</span>
</a>
</li>
<li><a class="channel-item" href="#">
<span>
视频
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
热点
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
直播
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
图片
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
娱乐
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
游戏
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
体育
</span>
</a></li>
</ul>
</div>
<div class="center">
<ul class="news_list">
</ul>
<div class="content">
<div class="pagination-holder clearfix">
<div id="light-pagination" class="pagination"></div>
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.simplePagination.js"></script>
<script>
let start=1;
let pageSize=10;
queryByPage(start,pageSize);
function queryByPage(start,pageSize){
$.ajax({
url:"newsServlet2",
dataType:"json",
type:"post",
data:{"start":start,"pageSize":pageSize},
success:function (pageInfo) {
$(".news_list").empty();
$.each(pageInfo.list,function (index,element) {
$(".news_list").append("<li>\n" +
" <div class=\"title-box\">\n" +
" <a href=\"#\" class=\"link\">\n" +
element.title +
" <hr>\n" +
" </a>\n" +
" </div>\n" +
" </li>")
});
$("#light-pagination").pagination({
pages:pageInfo.pages,
currentPage:pageInfo.pageNum
});
$("#light-pagination .page-link").click(function () {
let page=$(this).html();
if (page=="Prev"){
queryByPage(pageInfo.pageNum-1,pageSize);
}else if (page=="Next"){
queryByPage(pageInfo.pageNum+1,pageSize);
}else {
queryByPage(page,pageSize);
}
})
}
})
}
</script>
</html>
java代码
import com.fasterxml.jackson.databind.ObjectMapper;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageInfo;
import com.itheima.bean.News;
import com.itheima.service.NewsService;
import com.itheima.service.impl.NewsServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
@WebServlet("/newsServlet2")
public class NewsServlet2 extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置请求和响应的编码
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
//1.获取请求参数
String start = req.getParameter("start");
String pageSize = req.getParameter("pageSize");
//2.根据当前页码和每页显示的条数来调用业务层的查询方法,得到分页Page对象
NewsService service = new NewsServiceImpl();
Page page = service.pageQuery(Integer.parseInt(start), Integer.parseInt(pageSize));
//3.封装PageInfo对象
PageInfo<List<News>> info = new PageInfo<>(page);
//4.将得到的数据转为JSON
String json = new ObjectMapper().writeValueAsString(info);
//5.将数据响应给客户端
resp.getWriter().write(json);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
}
四 网络编程(回顾)
-
网络编程
a. 网络: 计算机程序与计算机程序之间的数据交互
b. 编程: 起码要有两个程序 -
网络架构
a. c/s : client to server 客户端对服务端
b. b/s : browser to server 浏览器对服务器(网页) -> web阶段主要b/s客户端,浏览器(统称前端,直接跟用户打交道) : 消费数据服务
服务端 : 提供数据服务(企业开发的) -
网络三要素
a. 协议 : 传输数据的规则(两个程序要交流,必须遵循同一套协议)
我们现在交流,遵循 普通话 协议
tcp,udp, http协议(最广泛,底层基于tcp)b. ip : 同一网络中,用来唯一标识一台计算机的(身份证)
c. port: 同一台计算机, 用来唯一标识一个进程(软件启动,至少占用一个进程)
-
举例
https://www.baidu.com -> 百度-
域名就是ip
ping www.baidu.com : 实际上向百度服务器发起请求
(只要网络可用), 百度服务器就会响应: 来自112.80.248.76的回复知道: www.baidu.com(域名) -> 112.80.248.76(ip) 映射关系
原因: 访问网站的时候,请求是先经过DNS服务器(域名解析服务), DNS存了很多域名和ip的映射
map<域名,ip> 域名比ip好记,当然还有其他原因注意: 有些网站不允许ip直接访问(百度可以)
-
看不到port,不代表没有
a. 使用http协议的程序,如果port=80,那么可以省略不写(在浏览器被隐藏)
http://112.80.248.76:80/ -> http://112.80.248.76b. 使用https协议的程序,如果port=443, 那么可以省略不写(在浏览器被隐藏)
https(secure: 安全, 对传输的数据进行加密)
-
-
url : uniform resource locator(全球资源定位器)
通俗: 网址(请求地址)
格式: 协议://ip:port/资源位置?参数
a. 资源位置 : 服务端程序中相应功能的标识
举例 https://www.baidu.com/s 使用了搜索功能
b. 参数 : get请求方式提交参数拼接进url(post不是)
name1=value1&name2=value2…
name是固定的,由服务端开发人员指定的,value动态变化
五 idea常用快捷键
常用的有fori/sout/psvm+Tab即可生成循环、System.out、main方法等boilerplate样板代码 。
例如要输入for(User user : users)只需输入user.for+Tab ;
再比如,要输入Date birthday = user.getBirthday()只需输入user.getBirthday().var+Tab即可。
代码标签输入完成后,按Tab,生成代码。
Ctrl+Alt+O 优化导入的类和包
Alt+Insert 生成代码(如get,set方法,构造函数等) 或者右键(Generate)
fori/sout/psvm + Tab
Ctrl+Alt+T 生成try catch 或者 Alt+enter
CTRL+ALT+T 把选中的代码放在 TRY{} IF{} ELSE{} 里
Ctrl + O 重写方法
Ctrl + I 实现方法
Ctr+shift+U 大小写转化
ALT+回车 导入包,自动修正
ALT+/ 代码提示
CTRL+J 自动代码
Ctrl+Shift+J,整合两行为一行
CTRL+空格 代码提示
CTRL+SHIFT+SPACE 自动补全代码
CTRL+ALT+L 格式化代码
CTRL+ALT+I 自动缩进
CTRL+ALT+O 优化导入的类和包
ALT+INSERT 生成代码(如GET,SET方法,构造函数等)
CTRL+E 最近更改的代码
CTRL+ALT+SPACE 类名或接口名提示
CTRL+P 方法参数提示
CTRL+Q,可以看到当前方法的声明
Shift+F6 重构-重命名 (包、类、方法、变量、甚至注释等)
Ctrl+Alt+V 提取变量
查询快捷键
Ctrl+Shift+Backspace可以跳转到上次编辑的地
CTRL+ALT+ left/right 前后导航编辑过的地方
ALT+7 靠左窗口显示当前文件的结构
Ctrl+F12 浮动显示当前文件的结构
ALT+F7 找到你的函数或者变量或者类的所有引用到的地方
CTRL+ALT+F7 找到你的函数或者变量或者类的所有引用到的地方
Ctrl+Shift+Alt+N 查找类中的方法或变量
双击SHIFT 在项目的所有目录查找文件
Ctrl+N 查找类
Ctrl+Shift+N 查找文件
CTRL+G 定位行
CTRL+F 在当前窗口查找文本
CTRL+SHIFT+F 在指定窗口查找文本
CTRL+R 在 当前窗口替换文本
CTRL+SHIFT+R 在指定窗口替换文本
ALT+SHIFT+C 查找修改的文件
CTRL+E 最近打开的文件
F3 向下查找关键字出现位置
SHIFT+F3 向上一个关键字出现位置
选中文本,按Alt+F3 ,高亮相同文本,F3逐个往下查找相同文本
F4 查找变量来源
CTRL+SHIFT+O 弹出显示查找内容
Ctrl+W 选中代码,连续按会有其他效果
F2 或Shift+F2 高亮错误或警告快速定位
Ctrl+Up/Down 光标跳转到第一行或最后一行下
Ctrl+B 快速打开光标处的类或方法
CTRL+ALT+B 找所有的子类
CTRL+SHIFT+B 找变量的类
Ctrl+Shift+上下键 上下移动代码
Ctrl+Alt+ left/right 返回至上次浏览的位置
Ctrl+X 删除行
Ctrl+D 复制行
Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者/…/ )
Ctrl+H 显示类结构图
Ctrl+Q 显示注释文档
Alt+F1 查找代码所在位置
Alt+1 快速打开或隐藏工程面板
Alt+ left/right 切换代码视图
ALT+ ↑/↓ 在方法间快速移动定位
CTRL+ALT+ left/right 前后导航编辑过的地方
Ctrl+Shift+Backspace可以跳转到上次编辑的地
Alt+6 查找TODO
其他快捷键
SHIFT+ENTER 另起一行
CTRL+Z 倒退(撤销)
CTRL+SHIFT+Z 向前(取消撤销)
CTRL+ALT+F12 资源管理器打开文件夹
ALT+F1 查找文件所在目录位置
SHIFT+ALT+INSERT 竖编辑模式
CTRL+F4 关闭当前窗口
Ctrl+Alt+V,可以引入变量。例如:new String(); 自动导入变量定义
Ctrl+~,快速切换方案(界面外观、代码风格、快捷键映射等菜单)
调试快捷键
其实常用的 就是F8 F7 F9 最值得一提的就是Drop Frame 可以让运行过的代码从头再来。
alt+F8 debug时选中查看值
Alt+Shift+F9,选择 Debug
Alt+Shift+F10,选择 Run
Ctrl+Shift+F9,编译
Ctrl+Shift+F8,查看断点
F7,步入
Shift+F7,智能步入
Alt+Shift+F7,强制步入
F8,步过
Shift+F8,步出
Alt+Shift+F8,强制步过
Alt+F9,运行至光标处
Ctrl+Alt+F9,强制运行至光标处
F9,恢复程序
Alt+F10,定位到断点
重构
Ctrl+Alt+Shift+T,弹出重构菜单
Shift+F6,重命名
F6,移动
F5,复制
Alt+Delete,安全删除
Ctrl+Alt+N,内联