目的
在账号信息注册时校验用户名是否存在
- 存在则返回:此用户名火爆 请更换
- 不存在则返回:用户名设置成功
步骤
1先编辑客户端浏览器界面
界面实现
2添加界面参数响应
要求:
- 输入用户名后,光标焦点点击到其他处(即用户名框光标失效)
- 获取用户名信息username,并传递到服务器端(l利用ajax发送请求,异步)
- 服务器端调用service层判断此用户名是否存在(可以扩展为在数据库中查询)
- 将判断结果返回到前端 ,前端根据判断结果输出到信息反馈区域(把Java对象转为json数据传输到客户端)(span区域)
js信息调用及处理函数
1服务器加载完成后实行11行的function入口函数
2用户输入用户名信息,鼠标焦点点击到别处,当焦点失效(blur方法)后执行,function()下的函数。这里function定义为一个匿名函数
- a是表示获取元素对象:
$(this)-获取上面的元素(与#user属性所匹配的元素)对象 ;
val()是获取这个元素值
3利用ajax发送异步请求(用户客户端与浏览器端的数据通信),参数分别表示为:
- 请求的路径即服务器;请求的参数,发送到服务器;
- 载入成功后的回调函数,其data为服务器响应回的数据;
- 最后一个参数json表示获取的响应结果的数据类型,因为在服务器端已经把Java对象转为json数据形式,客户端也要以此形式来接收
4根据服务器端传递回的data数据的信息判断用户名是否存在
- b获取span元素对象,因为后面对此元素对象进行操作
- c此元素对象调用内容操作html(),用于设置/获取元素标签体内容
3服务器端信息处理
1设置编码 定义变量
- 设置服务器响应回客户端界面数据信息的编码 如果编码不正确msg可能显示时出现乱码
- 定义用户名是否存在判断结果及判断结果输出字符信息对象
- 假设tom为已存在用户名(可扩展为读取数据库信息数据再做判断)
2把判断结果及相关字符串信息对象保存到Map中
3把Map对象转为JSON并传递到客户端(这也对应为什么客户端中需要把服务器端返回的内容格式设为json)
- 我们知道ObjectMapper的相关转换方法有下面几种
1. 转换方法:
* writeValue(参数1,obj):
参数1:
File:将obj对象转换为JSON字符串,并保存到指定的文件中
Writer:将obj对象转换为JSON字符串,并将json数据填充到字符输出流中
OutputStream:将obj对象转换为JSON字符串,并将json数据填充到字节输出流中
其中 Writer及OutputStream都是抽象类,用其子类实现
此时response.getWriter()返回的是PintWriter,extends Writer
* writeValueAsString(obj):将对象转 为json字符串
补充
为什么要进行json与Java对象互转:
- 因为json作为客户端与服务器端通信的数据载体,在服务器端使用的数据是Java对象而客户端使用json数据
- 但一般我们只在服务器端把Java转为json,而客户端一般可以直接内部把json转为Java对象