JSON&AJAX

一 JSON
- 1.1 JSON概述
- 1.2 JSON基础语法
- 1.3 JSON格式转换
- 1.4JSON转换工具的介绍
- - 1.41 对象转 JSON, JSON 转对象
  - 1.42Map转 JSON, JSON 转 Map
  - 1.43 Map转 JSON, JSON 转 Map
  - 1.44 List转 JSON, JSON 转 List
  - 1.45 List转 JSON, JSON 转 List
- 1.5 JSON小结
二 AJAX
- 2.1 AJAX概述
- 2.2 JS原生AJAX【了解,开发中不用....】
- 2.3原生JS实现AJAX详解
- 2.3 JQuery的Ajax插件【会用】
- - 2.3.1 get/post 函数(要背下来)
  - 2.3.2 ajax函数(看得懂,会抄)
- 2.4 同步和异步概述
- 2.5 AJAX小结
三搜索案例
搜索案例升级
分页（瀑布无限加载数据分页）
升级分页-点击按钮
四网络编程(回顾)
五 idea常用快捷键

一 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 对象）数组布尔Null3. 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 = 对象.nameconsole.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) //32for (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中是string2. 前端(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) //stringconsole.log(resultData.msg) //string无法这样解析,undefined//json格式的字符串转成对象let resultObj = JSON.parse(resultData)// let resultObj = eval("("+resultData+")") // 也可以转换,在变量外面加上小括号!!!console.log(resultObj) //console.log(typeof resultObj) // objectconsole.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。
- 1. 导入 jar 包。
  2. 创建核心对象。
  3. 调用方法完成转换。

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}*/@Testpublic void test01() throws Exception{//User对象转jsonUser 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>转jsonHashMap<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>转jsonHashMap<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>转jsonArrayList<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>转jsonArrayList<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 {@Overrideprotected 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>");}}@Overrideprotected 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)如果不写,默认texthttp协议的两种请求方式1. geta. 将参数拼接进urlb. 可能体现在浏览器的地址栏, 不安全, 传输的数据长度有限制2. posta. 参数不会拼接进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})
参数：
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请求多考虑了失败的情况

<!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) 默认设置下，所有请求均为异步请求。如果需要发送同步请求,设置false3. 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/postdata:"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=jkeyword=后面可以输入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=jlet 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>

搜索案例升级

案例分析

页面
- 1. 为用户名输入框绑定鼠标点击事件。
  2. 获取输入的用户名数据。
  3. 判断用户名是否为空。
  4. 如果为空，则将联想提示框隐藏。
  5. 如果不为空，则发送 AJAX 请求，并将响应的数据显示到联想框。
控制层
- 1. 获取请求参数。
  2. 调用业务层的模糊查询方法。
  3. 将返回的数据转成 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 {@Overrideprotected 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);}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req,resp);}
}

分页（瀑布无限加载数据分页）

如何确定当前显示的数据已经浏览完毕？

公式：(滚动条距底部的距离 + 滚动条上下滚动的距离 + 当前窗口的高度) >= 当前文档的高度
当前文档高度：存储10条数据，100px。
滚动条距底部的距离：1px。
当前窗口的高度：80px。
滚动条上下滚动的距离：>=19px。
实现思路
- 页面
  1. 定义发送请求标记。
  2. 定义当前页码和每页显示的条数。
  3. 定义滚动条距底部的距离。
  4. 设置页面加载事件。
  5. 为当前窗口绑定滚动条滚动事件。
  6. 获取必要信息(当前窗口的高度,滚动条上下滚动的距离,当前文档的高度)。
  7. 计算当前展示数据是否浏览完毕。
  8. 判断请求标记是否为 true。
  9. 将请求标记置为 false，当前异步操作完成前，不能重新发起请求。
  10. 根据当前页和每页显示的条数来请求查询分页数据。
  11. 当前页码+1。
- 服务器
  1. 获取请求参数(当前页,每页显示的条数)。
  2. 根据当前页码和每页显示的条数，调用业务层的方法，得到分页 Page 对象。
  3. 将得到的数据转为 json。
  4. 将数据响应给客户端。

各种包

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 {@Overrideprotected 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.将得到的数据转为JSONString json = new ObjectMapper().writeValueAsString(page);try {Thread.sleep(1000);} catch (InterruptedException e) {e.printStackTrace();}//4.将数据响应给客户端resp.getWriter().write(json);}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req,resp);}
}

升级分页-点击按钮

案例效果和环境准备
- 按钮效果
- 环境准备
  1. 使用已完善的ajax3项目
  2. 复制index.html更名为index2.html，并去掉原js中的方法
案例的分析
- 页面
  
  1.引入分页插件的样式文件和 js 文件。
  1. 定义当前页码和每页显示的条数。
  2. 调用查询数据的函数。
  3. 定义请求查询分页数据的函数，发起 AJAX 异步请求。
  4. 为分页按钮区域设置页数参数(总页数和当前页)。
  5. 为分页按钮绑定单击事件,完成上一页下一页查询功能。
- 服务器
  - 1. 获取请求参数。
    2. 根据当前页码和每页显示的条数，调用业务层的方法，得到分页 Page 对象
    3. 封装 PageInfo 对象。
    4. 将得到的数据转为 json。
    5. 将数据响应给客户端。
案例的实现
- 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 {@Overrideprotected 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.将得到的数据转为JSONString json = new ObjectMapper().writeValueAsString(info);//5.将数据响应给客户端resp.getWriter().write(json);}@Overrideprotected 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 -> 百度
1. 域名就是ip
  ping www.baidu.com : 实际上向百度服务器发起请求
  (只要网络可用), 百度服务器就会响应: 来自112.80.248.76的回复
  
  知道: www.baidu.com(域名) -> 112.80.248.76(ip) 映射关系
  原因: 访问网站的时候,请求是先经过DNS服务器(域名解析服务), DNS存了很多域名和ip的映射
  map<域名,ip> 域名比ip好记,当然还有其他原因
  
  注意: 有些网站不允许ip直接访问(百度可以)
2. 看不到port,不代表没有
  a. 使用http协议的程序,如果port=80,那么可以省略不写(在浏览器被隐藏)
  http://112.80.248.76:80/ -> http://112.80.248.76
  
  b. 使用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，内联

WebDay06 jsonajax,网络编程回顾,idea常用快捷键搜索案例分页案例相关推荐

python网络编程回顾
网络架构单机架构例子:植物大战僵尸,红警等 CS架构例子:QQ,大型网游等客户端:用户安装的软件: 服务端:统一管理数据库的主机中的软件就叫做服务端,再后来服务端不只是管理数据,外加处理业务逻 ...
二、网络编程中的常用类
1．IP地址类与IP地址相关的类有IPAddress类.IPHostEntry类.IPEndPoint类等.IPAddress类是一个描述IP地址的类,主要用来存储IP地址.IPAddress类的属 ...
【Java 网络编程】UDP 服务器与客户端持续交互案例
文章目录 I UDP 交互原理 II UDP 服务器端代码示例 III UDP 客户端代码示例 IV 服务器客户端运行结果 I UDP 交互原理 1. UDP 单播传输流程 : A 给 B 发送数 ...
【Socket网络编程进阶与实战】-----简易聊天室案例
前言本篇博客实现:简易聊天室聊天室案例: 聊天室数据传输设计必要条件:客户端.服务器必要约束:数据传输协议原理: 服务器监听消息来源,客户端链接服务器并发送消息到服务器.
基于Winsock API的VC网络编程实战
基于Winsock API的VC网络编程实战随着计算机信息技术的飞速发展,互联网与人类社会的工作.生活越来越紧密相关,它已经成为人类获取.交流信息的重要途径和手段.所以当前对于开发人员来说,网络编程 ...
21天学会Java之(Java SE第十三篇):网络编程、TCP/UDP通信
如今,计算机已经成为人们学习.工作.生活必不可少的工具.人们利用计算机可以和亲朋好友在网上聊天,玩网游或发邮件等,这些功能的实现都离不开计算机网络.计算机网络实现了不同计算机之间的通信,而这些必须依靠 ...
基于C语言的网络编程笔记分享
网络编程 OSI模型与TCP/IP协议体系结构 OSI模型七层理想化模型(并不是真正使用的模型,有参考价值) 应用层数据处理表示层数据的加密解密ASCII -> 电信号 -> A ...
JAVA 网络编程技术学习笔记
目录一.网络编程基本概念(了解) 1.1 计算机网络 1.2 网络通信协议 1.2.1什么是网络通信协议 1.2.2 OSI七层协议模型 1.2.3网络协议的分层 1.3数据的封装和解封 1.4 I ...
陈硕《网络编程实战》01 网络编程概要
陈硕<网络编程实战> 01 网络编程概要站在巨人的肩膀之上. 按照录像整理,部分专有名词不太肯定,版权归陈硕大神. 大家好,我是陈硕,受邀讲授一门有关网络编程的在线课程,这门课程的名称是 ...

WebDay06 jsonajax,网络编程回顾,idea常用快捷键搜索案例分页案例

JSON&AJAX

一 JSON

1.1 JSON概述

1.2 JSON基础语法

1.3 JSON格式转换

1.4JSON转换工具的介绍

1.41 对象转 JSON, JSON 转对象

1.42Map转 JSON, JSON 转 Map

1.43 Map转 JSON, JSON 转 Map

1.44 List转 JSON, JSON 转 List

1.45 List转 JSON, JSON 转 List

1.5 JSON小结

二 AJAX

2.1 AJAX概述

2.2 JS原生AJAX【了解,开发中不用…】

2.3原生JS实现AJAX详解

2.3 JQuery的Ajax插件【会用】

2.3.1 get/post 函数(要背下来)

2.3.2 ajax函数(看得懂,会抄)

2.4 同步和异步概述

2.5 AJAX小结

三搜索案例

搜索案例升级

分页（瀑布无限加载数据分页）

升级分页-点击按钮

四网络编程(回顾)

五 idea常用快捷键

WebDay06 jsonajax,网络编程回顾,idea常用快捷键搜索案例分页案例相关推荐

最新文章

热门文章

WebDay06 jsonajax,网络编程回顾,idea常用快捷键 搜索案例 分页案例

JSON&AJAX

一 JSON

1.1 JSON概述

1.2 JSON基础语法

1.3 JSON格式转换

1.4JSON转换工具的介绍

1.41 对象转 JSON, JSON 转对象

1.42Map转 JSON, JSON 转 Map

1.43 Map转 JSON, JSON 转 Map

1.44 List转 JSON, JSON 转 List

1.45 List转 JSON, JSON 转 List

1.5 JSON小结

二 AJAX

2.1 AJAX概述

2.2 JS原生AJAX【了解,开发中不用…】

2.3原生JS实现AJAX详解

2.3 JQuery的Ajax插件【会用】

2.3.1 get/post 函数(要背下来)

2.3.2 ajax函数(看得懂,会抄)

2.4 同步和异步概述

2.5 AJAX小结

三 搜索案例

搜索案例升级

分页（瀑布无限加载数据分页）

升级分页-点击按钮

四 网络编程(回顾)

五 idea常用快捷键

WebDay06 jsonajax,网络编程回顾,idea常用快捷键 搜索案例 分页案例相关推荐

最新文章

热门文章

WebDay06 jsonajax,网络编程回顾,idea常用快捷键搜索案例分页案例

三搜索案例

四网络编程(回顾)

WebDay06 jsonajax,网络编程回顾,idea常用快捷键搜索案例分页案例相关推荐