JavaWeb(ajax+json实现自动补全+配置404页面)

目录

一、ajax

二、准备阶段

三、语法

案例一：使用jQuery的ajax即时判断用户名是否可用

案例二：使用jQuery的ajax+json实现自动补全功能

配置404页面

---

一、ajax

ajax：只刷新局部页面的技术

技术核心:发送请求到服务器并获得返回结果

异步：发送请求后不等返回结果，由回调函数处理结果

二、准备阶段

1、jquery-3.3.1.js

2、JSON需要的jar包：fastjson-1.2.47.jar

3、eclipse

4、将jQuery和jar包全部导入到项目中

三、语法

$.ajax({
	url:"vname.do",//请求地址 servlet
	data:{iname:name},//"iname="+name, 请求参数(传递到服务器)
	type:"post",//请求参数
	dataType:"text",//预期服务器可能返回的数据类型 
	success:function(data){//成功的回调函数 data是服务器返回的数据
		//alert(data);
		$("#aa").html(data);//innerHTML 给span赋值
	},
	error:function(){//失败的回调函数
		alert("有误");
	}
});

//      url          data        success
$.post("vname.do", {iname:name}, function(data) {
		$("#aa").html(data);
  //[dataType]
}, "text")

案例一：使用jQuery的ajax即时判断用户名是否可用

html代码：

<h2>使用jQuery的ajax即时判断用户名是否可用</h2>
用户名：<input type="text" id="sname">
<span style="color:red;" id="aa"></span>

servlet代码：

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("iname");
		//调用biz层 select * from 用户表 where uname = ?  返回boolean 
		String str = "该用户名可用";//可用
		//假设法：假设数据表已经存在admin这个用户
		if("admin".equals(name)) {
			str = "该用户名已存在";
		}
		//把响应输送到客户端
		out.print(str);
		out.flush();//刷新
		out.close();//关闭
	}
}

        写好servlet之后一定要在web.xml进行配置映射

jQuery代码：

$(function(){
		//给文本框添加失焦事件
		$("#sname").blur(function(){
			//获取文本框 的值
			var name=$("#sname").val();
            //把name值传到vname.do中
			$.post("vname.do", {iname:name}, function(data) {
                //赋值
				$("#aa").html(data);
			})
		});
	})

        将servlet返回回来的值赋给div

运行：

        用户名可用：

        

        当用户名为admin时：

                

案例二：使用jQuery的ajax+json实现自动补全功能

html代码：

<h2>使用jQuery的ajax+json实现自动补全功能</h2>
<input type="text" id="sname" style="width:400px"/>
<div id="aa"></div>

servlet代码：

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("iname");
		//调用查询全部的方法  biz层 里氏替换原则 
		UserDao ud=new UserDao();
		//用户集合 模糊查询的方法
		List<User> ls=ud.getAll(name);
		//怎么将集合--->字符串
		/**
		 * 模拟json格式: 边遍历边拼接
		 * 对象：{"uname":"xx1","uage":20}
		 * 数组：[]
		 * 对象数组：[{"uname":"xx1","uage":20},{"uname":"xx2","uage":21}]
		 */
		/*StringBuffer sb=new StringBuffer();
		sb.append("[");
		//遍历集合
		for (User u : ls) {
			sb.append("{");
			sb.append("\"uuid\":"+u.getUuid()+",");
			sb.append("\"uname\":\""+u.getUname()+"\",");
			sb.append("\"usex\":\""+u.getUsex()+"\",");
			sb.append("\"uage\":"+u.getUage());
			sb.append("},");
		}
		sb.append("]");*/
		
		//将集合--->String
		String str=JSON.toJSONString(ls);
		
		//把响应输送到客户端
		out.print(str);
		out.flush();//刷新
		out.close();//关闭
	}
}

jQuery代码：

$(function(){
    //让div隐藏
	$("#aa").hide();
	//给文本框添加失焦事件
	$("#sname").keyup(function(){//键盘事件
		//让div显示
		$("#aa").show();
		//获取文本框 的值
		var name=$("#sname").val();
		//$.post()  url,data,success,[dataType]
		$.post("autoFill.do", {iname:name}, function(data) {
			//json格式的对象数组的字符串 
			//将json格式的对象数组字符串-->js的对象数组
			//var ss=eval(data);//js方式
			var ss=$.parseJSON(data);//jQuery方式
			var sb="<ul>";
			//遍历集合
			$.each(ss,function(i,u){//下标,用户
				sb+="<li onclick=\"myf('"+u.uname+"')\" onmouseover=\"this.className='xx'\" onmouseout=\"this.className='yy'\">"+u.uname+"</li>";
			});
			sb+="</ul>";
			//给div赋值
			$("#aa").html(sb);
		})
	});
})
	
	function myf(name) {
		//给文本框赋值
		$("#sname").val(name);
		//让div隐藏
		$("#aa").hide();
	}

运行：

配置404页面

        第一步：找到web.xml

        第二步：在</web-app>之前配置以下代码：

<error-page>
  <error-code>404</error-code>
  <location>/error.jsp</location>//要跳转的404界面
 </error-page>