使用ajax对用户注册时，用户名进行检验

最新推荐文章于 2021-08-05 17:57:33 发布

anzuo20142

最新推荐文章于 2021-08-05 17:57:33 发布

阅读量507

点赞数

文章标签： javascript json java ViewUI

原文链接：http://www.cnblogs.com/newcityboy/p/11546071.html

版权

package cn.hopetesting.com.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.print.attribute.standard.JobOriginatingUserName;
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 java.io.IOException;
import java.util.HashMap;
import java.util.Map;

/**
 * @author newcityman
 * @date 2019/9/18 - 21:49
 */
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 response.setContentType("application/json;charset=utf-8");
// response.setContentType("text/html;charset=utf-8");
 //1、获取参数username
 String username = request.getParameter("username");
 //2、调用service层判断用户名是否存在
 //期望服务器响应回的数据格式：{
 //("userExist:true,"msg","此用户名太受欢迎，请更换一个")，
 // ("userExist:false,"msg","此用户名可用")}
 Map<String,Object> map = new HashMap<String,Object>();
 if("tom".equals(username)){
//存在
 map.put("userExist",true);
 map.put("msg","此用户名太受欢迎，请更换一个");
 }else{
//不存在
 map.put("userExist",false);
 map.put("msg","此用户名可用");
 }
//将map转换为json，并且传递给客户端
 //将map转为json
 ObjectMapper mapper = new ObjectMapper();
 //并且传递给客户端
 mapper.writeValue(response.getWriter(),map);

 }

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
 }
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>register</title>
 <script src="js/jquery-3.3.1.min.js"></script>
 <script>
 //页面加载完成后
 $(function () {
//给username绑定blur时间
 $("#username").blur(function () {
//获取username文本输入框的值
 var username = $(this).val();
 //发送ajax请求
 //期望服务器响应回的数据格式：{
 //("userExist:true,"msg","此用户名太受欢迎，请更换一个")，
 // ("userExist:false,"msg","此用户名可用")}
 $.get("findUserServlet",{username:username},function (data) {
//判断userExist键的值是否存在

 var span = $("#s_username");
 if(data.userExist){
//存在
 span.css("color","red");
 span.html(data.msg);
 }else{
//不存在
 span.css("color","green");
 span.html(data.msg);
 }
 }/*,"json"*/);
 });
 });
 </script>
</head>
<body>
 <input type="text" id="username" name="username" placeholder="请输入用户名">
 <span id="s_username"></span><br/>
 <input type="password" id="password" name="passowrd" placeholder="请输入密码"><br/>
 <input type="submit" value="提交">
</body>
</html>

转载于:https://www.cnblogs.com/newcityboy/p/11546071.html

anzuo20142

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用ajax对用户注册时，用户名进行检验

package cn.hopetesting.com.servlet;import com.fasterxml.jackson.databind.ObjectMapper;import javax.print.attribute.standard.JobOriginatingUserName;import javax.servlet.ServletException;import jav...
复制链接

扫一扫