使用ajax技术实现判断用户名是否存在

菜小猿

已于 2024-06-13 15:27:03 修改

阅读量992

点赞数 1

分类专栏：前端后端 java 文章标签： ajax jq servlet

于 2019-08-22 10:48:12 首次发布

本文链接：https://blog.csdn.net/weixin_44415764/article/details/100009989

版权

后端同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

java

15 篇文章 0 订阅

订阅专栏

前端

10 篇文章 0 订阅

订阅专栏

本文详细介绍了如何通过Ajax技术与Servlet配合，在不刷新页面的情况下，实现实时检查用户名是否已被注册。首先，需要导入JSON相关jar包和jQuery库。接着，编写前台JavaScript代码，发送Ajax请求到后台Servlet。最后，展示后台Servlet接收到请求后的处理逻辑，返回用户名检查结果。

摘要由CSDN通过智能技术生成

实现步骤：
1. 导入json所需的jar包和jquery文件
2. 编写前台代码
3.前台页面代码

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script src="jquery.js"></script><!-- 引入jq文件 -->

</head>
<body>
	<form action="loginServlet" method="get">
		<input type="text" name="name"  placeholder="用户名"><span id="span"></span><br>
		<input type="password" name="pwd" placeholder="密码"><br>
		<input type="submit" value="提交">
	</form>
	
		<script>
		$(function(){
			$("input[name=name]").blur(function(){//失去焦点
				var name = $(this).val();//获取值
				console.log(name)
				var span = $("#span");
				//发送ajax请求
				$.get("/AjaxJson/loginServlet",{username:name},function(data){
					//判断是否存在,显示不同的样式
					if(data.isExist){
						span.css("color","red");
						span.html(data.hint);
					}else{
						span.css("color","green");
						span.html(data.hint);
					}
				},"json");
			});
		});
	</script>
</body>

后台代码

package com.liu.servlet;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

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.fasterxml.jackson.databind.ObjectMapper;

import jdk.nashorn.internal.parser.JSONParser;

@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//设置服务器响应的数据格式(json格式;json所使用的字符集utf-8)
		resp.setContentType("application/json;charset=UTF-8");
		String username = req.getParameter("username");
		//创建集合存入值
		Map<String,Object> hash = new HashMap<>();
		//可以查询数据库（我没有查询数据库了,）
		if("hello".equals(username)) {
			hash.put("isExist", true);
			hash.put("hint", "用户已存在");
			System.out.println("asa"+username);
		}else {
			hash.put("isExist", false);
			hash.put("hint", "用户可使用");
		}
		//使用json传值
		ObjectMapper mapper = new ObjectMapper();
		mapper.writeValue(resp.getWriter(), hash);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}