存在问题： 如果用户名已存在，用户提交后会刷新整个页面，导致输入的数据丢失，用户体验不好。 解决方案： 1）使用ajax将用户提交给后台进行用户名验证 2）当输入框失去焦点时进行提示
标准请求响应浏览器的动作（同步操作）：浏览器请求什么资源，服务器收到后就发送给浏览器，随之浏览器就显示什么资源，全局刷新。
ajax:异步请求. 2.1 局部刷新,通过异步请求,请求到服务器资源数据后，通过脚本修改页面中部分内容. 相当于在主线程中开了一个子线程，由子线程去访问服务器请求资源，再根据子线程中获取的资源去修改主线程的部分信息。
使用ajax的时候不能使用return重定向或者请求转发，否则会刷新页面，应该只返回数据信息， 在springBoot框架中使用时必须要注释@ResponseBody,表示返回数据
Asynchronous JavaScript And XML（异步的javascript和xml） 是一种页面技术，能实现Js代码和后台服务器的网络通信 特点：局部更新页面，不会刷新整个页面，用户体验好 实现方法： 1）原生Ajax 通过XMLHttpRequest对象实现 操作比较繁琐，不推荐 2）使用第三方js框架 如：JQuery（如在srcipt中写有$()这样的标记，则表示使用的是JQuery）
实现步骤： 1）引入jquery
<!--引入JQuery--> <script src="js/jquery-3.1.1.js"></script>2）编写后台提示的方法，需要直接返回数据 @ResponseBody
@RequestMapping(value = "checkTel",method = RequestMethod.POST) //在使用Ajax交互必须要加@ResponseBody,直接返回数据，否则将会根据return去查找页面，这样就是刷新整个页面 @ResponseBody public Boolean checkTel(String username){ User user = userService.selectUserByTel(username); //返回手机号是否存在 if(user == null){ return false; } return true; }3）编写js的方法，ajax调用后台
//给手机号的输入框添加失去焦点事件 blur $("[name=username]:text").blur( function(){ //获得手机号 [属性名=值]:类型 val()是获得值 var uname = $("[name=username]:text").val(); //把手机号发送到后台进行判断 $.ajax({ url:"http://localhost:8080/user/checkTel", type:"post", data:{username:uname}, async:true, success:function(result){ //获得java后台的返回值 if(result == true){ //通过id找到span，修改里面的内容 $("#msg").text("用户名已经存在").css("color","red"); }else{ $("#msg").text("用户名可以使用").css("color","green"); } } }); } );Jquery中的Ajax方法： $.ajax( { url:“后台的地址”, type:“提交方法(get/post)”, data:{参数名:值,参数名:值}, async:是否异步（true异步，false同步）, success:function(返回数据){ 页面更新操作 } } ); post方法提交 $.post( “后台url”, {参数名:值,参数名:值}, function(返回数据){ 页面更新操作 } ); get方法提交 $.get( “后台url?参数名=值&参数名=值”, function(返回数据){ 页面更新操作 } )
Ajax
标准请求响应时浏览器的动作(同步操作) 1.1 浏览器请求什么资源,跟随显示什么资源ajax:异步请求. 2.1 局部刷新,通过异步请求,请求到服务器资源数据后,通过脚本修改页面中部分内容.ajax 由 javascript 推出的. 3.1 由 jquery 对 js 中 ajax 代码进行的封装,达到使用方便的效果.jquery 中 ajax 分类 4.1 第一层 $.ajax({ 属性名:值,属性名:值}) 4.1.1 是 jquery 中功能最全的.代码写起来相对最麻烦的. 4.1.2 示例代码 /* url: 请求服务器地址 data:请求参数 dataType:服务器返回数据类型 error 请求出错执行的功能 success 请求成功执行的功能,function(data) data 服务器返 回的数据. type:请求方式 */ $("a").click(function(){ $.ajax({ url:'demo', data:{"name":"张三"}, dataType:'html', error:function(){ alert("请求出错.") }, success:function(data){ alert("请求成功"+data) }, type:'POST' }); return false;//取消超链接默认功能 })4.2 第二层(简化$.ajax) 4.2.1 $.get(url,data,success,dataType)) 4.2.2 $.post(url,data,success,dataType)
4.3 第三层(简化$.get()) 4.3.1 $.getJSON(url,data,success). 相 当 于 设 置 $.get 中dataType=”json” 4.3.2 $.getScript(url,data,success) 相 当 于 设 置 $.get 中dataType=”script”
如果服务器返回数据是从表中取出.为了方便客户端操作返回的数据,服务器端返回的数据设置成 json 5.1 客户端把 json 当作对象或数组操作.
json:数据格式. 6.1 JsonObject : json 对象,理解成 java 中对象 6.1.1 {“key”:value,”key”:value} 6.2 JsonArray:json 数组 6.2.1 [{“key”:value,”key”:value},{}]
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> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ $("a").click(function(){ $.post("demo",{"name":"张三","age":"123"},function(data){ var result=""; for(var i =0 ;i<data.length;i++){ result+="<tr>"; result+="<td>"+data[i].id+"</td>" result+="<td>"+data[i].username+"</td>" result+="<td>"+data[i].password+"</td>" result+="</tr>"; //如果这里传送过来的是json对象，直接使用data.id就可以拿到id对应得数据 } //相当innerHTML先清空后添加 $("#mytbody").html(result); }) return false; }) }); </script> </head> <body> <a href="demo">跳转</a> <table border="1"> <tr> <td>编号</td> <td>姓名</td> <td>密码</td> </tr> <tbody id="mytbody"></tbody> </table> </body> </html>控制层 servlet层
@WebServlet("/demo") public class DemoServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("执行控制器"); String name = req.getParameter("name"); Users users = new Users(); users.setId(1); users.setPassword("123"); users.setUsername("张三"); Users users1 = new Users(); users1.setId(2); users1.setPassword("22"); users1.setUsername("李四"); List<Users> list = new ArrayList<Users>(); list.add(users1); list.add(users); //将数据信息转化成json数据进行传输,其中ObjectMapper是由json包提供的数据转换的类 ObjectMapper mapper = new ObjectMapper(); //将对象转换成json数据，即字符串封装 String result = mapper.writeValueAsString(list); //设置需要传输的数据类型，application/json表示控制头和响应头 resp.setContentType("application/json;charset=utf-8"); //生成输出流 PrintWriter out = resp.getWriter(); out.println(result); out.flush(); out.close(); } }