Ajax与json - 悦读

1.Ajax

2.json

3.Ajax+json

一、神奇的Ajax

1.要用Ajax先来了解为什么使用Ajax?

1.1:无刷新：不刷新整个页面，只刷新局部

（无刷新的好处：只更新部分页面，有效利用带框，提高用户体验）

2.那Ajax是什么？

Ajax:一种只刷新局部页面的技术

Ajax中有几个方法：今天我们最要就说两个：1.$.ajax() 2.$.post()

$.ajax():通过HTTP请求加载远程数据

$.post()：通过远程HTTP POST请求加载信息(这是一个简单的POST请求功能已取代复杂$.ajax.请求成功是可条用回调函数。如果需要在出错时执行函数，请使用$.ajax)

二、json

json的话由于有很多种，今天我们就说一种（fastjson）

使用这个架包非常简单只需一下步骤：

1.导入jar包

2.使用以下方法：

String str=JSON.toJSONString(ls); //ls为集合

字符串变成集合
--使用js的eval()方法
--使用jQuery的$.parseJSON()

使用之后即可成为标准的json格式

下面我们将分别用几个案例将上面说的演示给大家看：

案例:1：使用jQuery的ajax判断用户名是否存在（$.ajax/$.post）

案例2：利用ajax+json实现【自动补全】功能

案例3:无刷新实现分页

1.使用jQuery的ajax判断用户名是否存在（$.ajax/$.post）

jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入jQuery的类库 -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<!-- 另起一个script -->
<script type="text/javascript">
	//页面载入函数
	$(function() {
		//给文本框添加失焦事件 
		$("#sname").blur(function() {
			//获取文本框 的值
			var name=$("#sname").val();
			//一、$.ajax()
			 $.ajax({
				url:"vname.do",//请求地址(servlet)
				data:{sname:name},//"sname="+name+"&spwd="+pwd 请求参数 
				type:"post",//请求方式 
				dataType:"text",//预期服务器可能返回的数据类型
				success:function(data){//成功的回调函数
					//alert(data);//data是服务器返回的响应 
					$("#aa").html(data);//给span赋值 innerHTML
				},
				error:function(){//失败的回调函数
					alert("有误");
				}
			}); 
			
		});
	})
</script>
</head>
<body>
	<h2>使用jQuery的ajax即时判断用户名是否可用</h2>
	<form>
		<input type="text" id="sname"><span style="color:red;" id="aa"></span>
		<hr>
		<input>
	</form>
</body>
</html>

IndexServlet页面

package com.zking.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/vname.do")
public class VNameServlet extends HttpServlet{

	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//设置编码方式
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=UTF-8");
		//获取out
		PrintWriter out=resp.getWriter();
		//接收客户端传递过来的参数 
		String name=req.getParameter("sname");
		//调用biz层判断name是否存在
		//select * from 用户表 where uname=? 建议返回boolean
		//假设法：假设数据表中存在admin这个用户了
		String str="该用户名可用";//可用
		if("admin".equals(name)) {
			str="该用户名已存在";//已存在
		}
		//由于需要局部刷新 不可用转发 重定向 location.href
		//把响应输送到客户端
		out.write(str);//写
		out.flush();//刷新
		out.close();//关闭
		
	}
	
}

即可实现即时判断：默认已存在admin用户

2：利用ajax+json实现【自动补全】功能

servlet

package com.zking.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

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 com.alibaba.fastjson.JSON;
import com.zking.dao.UserDao;
import com.zking.entity.User;

@WebServlet("/autoFill.do")
public class AutoFillServlet extends HttpServlet{

	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//设置编码方式
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=UTF-8");
		//获取out
		PrintWriter out=resp.getWriter();
		//接收客户端传递过来的参数 
		String name=req.getParameter("sname");
		
		//调用biz层的模糊查询的方法
		//错误示范 模拟数据
		UserDao ud=new UserDao();
		List<User> ls=ud.getAll(name);
		//怎么把集合--->json格式的字符串
		/**
		 * 模拟json格式:边遍历边拼接
		 * 表示对象：{"uname":"大炮0","usex":"男","uage":19}
		 * 表示数组：[]
		 * 表示对象数组：[{"uname":"大炮0","usex":"男","uage":19},{"uname":"大炮1","usex":"男","uage":20}]
		 */
		
		/*StringBuffer sb=new StringBuffer();
		sb.append("[");
		for (User u : ls) {
			sb.append("{");
			sb.append("\"uname\":\""+u.getUname()+"\",");
			sb.append("\"usex\":\""+u.getUsex()+"\",");
			sb.append("\"uage\":"+u.getUage());
			sb.append("},");
		}
		sb.append("]");*/
		
		//将集合解析成字符串
		String str=JSON.toJSONString(ls);
		
		//由于需要局部刷新 不可用转发 重定向 location.href
		//把响应输送到客户端
		out.write(str);//写
		out.flush();//刷新
		out.close();//关闭
		
	}
	
}

jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	#sname{width:400px;}
	li{list-style:none;}
	#aa{border:solid 1px gray;width:406px;}
	.xx{background:yellow;cursor:pointer;}
	.yy{}
</style>
<!-- 引入jQuery的类库 -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	//页面载入函数
	$(function(){
		//让div隐藏
		$("#aa").hide();
		//给文本框添加键盘事件
		$("#sname").keyup(function(){
			//让div显示
			$("#aa").show();
			//获取文本框的值
			var name=$("#sname").val();
			$.post("autoFill.do",{sname:name},functiondata){
				//吧json格式的对象数组字符串--》js的对象数组
				var ss=eval(data);//js
				/*var ss=$.parseJSON(data);//jQuery
				if(ss.length==0){
					$("#aa").html("无记录");
					return;
				}
				var sb="<ul>";
				//循环遍历
				$.each(ss,function(i,u){//下标，元素
					sb+="</ul>";
					//给div赋值
					$("#aa").html(sb);*/
				})
				
			})
			
		})
	})
	function myf(name) {
		//给文本框赋值
		$("#sname").val(name);
		//让div隐藏
		$("#aa").slideUp(500);
	}
</script>
</head>
<body>
	<h2>使用jQuery的ajax+json实现搜索自动提示功能</h2>
	<input type="text" id="sname">
	<div id="aa"></div>
</body>
</html>

效果图：

3:无刷新实现分页

主页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
	padding: 20px 40px;
}
</style>
<script type="text/javascript">
$(function(){
	myf(1);
})
var pageIndex;
var max;
var name;
function myf(type){
	name=$("#bb").val();
	if(type==1){
		pageIndex=1;
	}else if(type==2){
		//上一页
		if(pageIndex>1){
			pageIndex--;
		}else{
			alert("前面没有了哦");
		}
	}else if(type==3){
		//下一页
		if(pageIndex<max){
			pageIndex++;
		}else{
			alert("已经是最后一页");
		}
	}else{
		//末页
		pageIndex=max;
	}
	$.post("index.do",{pid:pageIndex,pname:name},function(data){
		var x=data.split("*");//分割
		var ss=$.parseJSON(x[0]);//商品信息
		max=parseInt(x[1]);//最大页数
		var sb="<table class='table table-bordered table-striped'><tr><th>商品编号</th><th>商品名称</th><th>商品描述</th><th>商品价格</th><th>商品操作</th></th>";
		$.each(ss,function(i,g){
			sb+="<tr>";
			sb+="<td>"+g.id+"</td>";
			sb+="<td>"+g.name+"</td>";
			sb+="<td>"+g.describe+"</td>";
			sb+="<td>"+g.price+"</td>";
			sb+="<td><a href='addCar.do?id="+g.id+"' class='btn btn-default'>加入🚗</a></td>";
			sb+="</tr>";
		})
		sb+="</table>";
		$("#aa").html(sb);
		$("#xx").html(pageIndex);
		$("#yy").html(max);
	})
}
function mys(type){
	$("#bb").val("");
	myf(type);
}
</script>
</head>
<body>
	<h1>
		您好${user.username }, <small>这是首页</small>
	</h1>
	<h1>
		<a href="car.jsp" class="btn btn-primary">点我去购物车🛒</a>
	</h1>
	<div>
	商品名称:<input type="text" id="bb">
	<button onclick="myf('1')">查询</button>
	<button onclick="mys('1')">查询全部</button>
	</div>
	<div id="aa"></div>	
	当前【<span id="xx"></span>/<span id="yy"></span>】
	<a href="javascript:myf(1)">首页</a>
	<a href="javascript:myf(2)">上一页</a>
	<a href="javascript:myf(3)">下一页</a>
	<a href="javascript:myf(4)">末页</a>
</body>
</html>

servlet层

package com.zking.Servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

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 com.alibaba.fastjson.JSON;
import com.zking.Biz.GoodsBiz;
import com.zking.Biz.IGoodsBiz;
import com.zking.entity.Goods;
/**
 * 为首页提供数据
 * @author zjjt
 *
 */
@WebServlet("/index.do")
public class IndexServlet extends HttpServlet{
	private IGoodsBiz goodsBiz=new GoodsBiz();
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String pid=req.getParameter("pid");
		String pname=req.getParameter("pname");
		if(pname==null) {
			pname="";
		}
		int pageIndex=1;
		int PageSize=3;
		PrintWriter out = resp.getWriter();
		if(pid!=null) {
			pageIndex=Integer.parseInt(pid);
		}
		//把变量放到另外一个页面 Session Appliaction request
		List<Goods> ls=goodsBiz.getAll(pageIndex, PageSize,pname);
		String str=JSON.toJSONString(ls);
		int max=goodsBiz.getRows("car_goods where name like '%"+pname+"%'",PageSize);
		out.print(str+"*"+max+"*"+pname);
		out.flush();
		out.close();
		
	}
}

即可实现无刷新分页；

效果图

好啦，今天的内容就到这里，下期再见！！！