快速入门
介绍
原生js实现ajax
jQuery实现ajax
<body>
<form action="/userServlet" method="post">
<input type="text" name="username" id="btn1"><span id="uSpan"></span>
<input type="text" name="password" style="color: green" id="">
</form>
</body>
<script>
$("#btn1").blur(function(){
$.post(
"userServlet",
"username="+$("#btn1").val(),
function (data){
$("#uSpan").html(data)
},
"text"
)
})
</script> 
<body>
<input type="text" name="username" id="btn1"><span id="uSpan"></span>
</body>
<script>
$("#btn1").blur(function(){
$.ajax(
{
url:"userServlet",
async:true,
data:"username="+$("#btn1").val(),
type:"get",
dataType:"text",
success:function (data){
$("#uSpan").html(data)
},
error:function (){
alert("失败。。")
}
}
)
})
</script> JSON的处理
json回顾
创建格式
常用方法
JSON转换工具
常用类&OBjectMapper常用方法
private ObjectMapper mapper = new ObjectMapper();
@Test
public void test01() throws Exception {
User user = new User("张三",25);
String json = mapper.writeValueAsString(user);
System.out.println("json:"+json);
User user1 = mapper.readValue(json, User.class);
System.out.println("java对象："+user1);
}
@Test
public void test02() throws Exception {
HashMap<String,String> map = new HashMap<>();
map.put("张三","中城基");
map.put("李四","东城基");
map.put("王五","西城基");
String json = mapper.writeValueAsString(map);
System.out.println("map转json："+json);
HashMap<String,String> map1 = mapper.readValue(json,HashMap.class);
System.out.println("HashMap"+map1);
}
@Test
public void test03() throws Exception {
HashMap<String,User> map = new HashMap<>();
User u1 = new User("张三",18);
User u2 = new User("李四",19);
User u3 = new User("王五",20);
map.put("张三",u1);
map.put("李四",u2);
map.put("王五",u3);
String json = mapper.writeValueAsString(map);
System.out.println("map转json："+json);
HashMap<String,User> map1 = mapper.readValue(json,new TypeReference<HashMap<String,User>>(){});
System.out.println("HashMap:"+map1);
}
@Test
public void test04() throws Exception {
ArrayList<String> list = new ArrayList<>();
list.add("张力");
list.add("李四");
String json = mapper.writeValueAsString(list);
System.out.println("list转json："+json);
ArrayList<String> list2 = mapper.readValue(json, ArrayList.class);
System.out.println(list2);
}
@Test
public void test05() throws Exception {
User u1 = new User("张三",18);
User u2 = new User("李四",19);
ArrayList<User> list = new ArrayList<>();
list.add(u1);
list.add(u2);
String json = mapper.writeValueAsString(list);
System.out.println("list转json："+json);
ArrayList<User> list2 = mapper.readValue(json,new TypeReference<ArrayList<User>>(){});
System.out.println(list2);
} 小结
分页案例
<script>
//1.定义发送请求标记
let send = true
//2.定义当前页码和每页显示的条数
let start = 1;
let PageSize = 10;
//3.定义滚动条距底部的距离
let bottom = 1;
//4.设置页面加载事件
$(function (){
//5.为当前窗口绑定滚动条滚动事件
$(window).scroll(function (){
//6.获取必要信息，用于计算当前展示数据是否浏览完毕
//当前窗口的高度
let windowHeight = $(window).height()
//当前滚动条从上往下滚动的距离
let scrollTop = $(window).scrollTop()
//当前文档的高度
let docHeight = $(document).height()
//7.计算当前展示数据什么时候浏览完毕
//当 滚动条距底部的距离 + 当前滚动条滚动的距离 + 当前窗口的高度 >= 当前文档的高度
if((bottom + scrollTop + windowHeight) >= docHeight){
//8.判断请求标记是否为true
if(send){
// 如果当前页大于10，则将加载动图隐藏并结束方法
//9.将请求标记置为false，当前异步操作完成前，不能重新发起请求
send = false
//10.根据当前页和每页显示的条数来 请求查询分页数据
queryByPage(start,PageSize)
//11.当前页码+1
start++;
}
}
})
})
//请求查询分页数据的函数
function queryByPage(start,PageSize){
//将加载动图显示
$(".loading").show()
//发起AJAX异步请求
$.ajax({
url:"queryPage",
type:"POST",
dataType:"json",
data:{"start":start,"PageSize":PageSize},
success:function (data){
$(".loading").hide()
if(data.length == 0){
$("#no").html("我也是有底线的")
return
}
//追加到页面
let titles = "";
for (let i = 0; i < data.length; i++) {
titles += "<li>\n" +
" <div class=\"title-box\">\n" +
" <a href=\"#\" class=\"link\">\n" +
data[i].title+
" <hr>\n" +
" </a>\n" +
" </div>\n" +
" </li>"
}
$(".news_list").append(titles)
//将请求标记置为true
send = true;
}
})
}
</script> @WebServlet("/queryPage")
public class PageSevlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String start = req.getParameter("start");
String pageSize = req.getParameter("PageSize");
PageService ps = new PageServiceImpl();
Page page = ps.selectPage(Integer.parseInt(start), Integer.parseInt(pageSize));
String json = new ObjectMapper().writeValueAsString(page);
try {
Thread.sleep(1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
resp.getWriter().write(json);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
} 
<script>
let start =1
let pageSize = 10
queryByPage(start,pageSize)
function queryByPage(start,pageSize){
$.ajax({
url:"queryPage2",
type:"POST",
dataType:"json",
data:{"start":start,"pageSize":pageSize},
success:function (pageInfo){
let titles = ""
for (let i = 0; i < pageInfo.list.length; i++) {
titles +="<li>\n" +
" <div class=\"title-box\">\n" +
" <a href=\"#\" class=\"link\">\n" +
pageInfo.list[i].title +
" <hr>\n" +
" </a>\n" +
" </div>\n" +
" </li>"
}
$(".news_list").html(titles)
$("#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> @WebServlet("/queryPage2")
public class PageSevlet2 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String start = req.getParameter("start");
String pageSize = req.getParameter("pageSize");
PageService ps = new PageServiceImpl();
Page page = ps.selectPage(Integer.parseInt(start), Integer.parseInt(pageSize));
//封装PageInfo对象
PageInfo<List<News>> info = new PageInfo<>(page);
//转json 文件
String json = new ObjectMapper().writeValueAsString(info);
//返回
resp.getWriter().write(json);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
} 
京公网安备 11010502036488号