Ajax异步提交（用户名判重）

最新推荐文章于 2023-05-27 17:34:17 发布

原创最新推荐文章于 2023-05-27 17:34:17 发布 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

该博客介绍了一个使用Ajax进行异步提交的实例，主要用于实现用户名的判重检查。网页通过Ajax发送请求到Servlet层，Servlet处理验证并返回结果，整个过程不刷新页面，提升了用户体验。XML配置文件用于配置相关请求的处理路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目结构

网页代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
function check_username(val){
	$.ajax({  
        type: "POST",      
        url: "check", //看下面xml的配置     
        data: "username="+val,   //形成一对key-value，提交对象可以通过request.getParameter("username");获得val值
        success: function(data){  //提交成功后调用的方法
        if(data=="false"){//后台返回表示重名
        	$("#span").html("X");
        }
        else if(data=="true"){
        	$("#span").html("√");
  
        }   
        }
	    //error://提交失败将调用的方法
        });  
}
</script>
</head>
<body>
<input type="text" id="username_input" name="username" placeholder="Username" onblur="check_username(this.value);">
<span id="span"></span>
</body>
</html>

Servlet层方法

package com.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class UsernameCheck extends HttpServlet {
	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setHeader("Content-type", "text/html;charset=UTF-8");
		response.setCharacterEncoding("utf-8");
		request.setCharacterEncoding("UTF-8");
		String username = request.getParameter("username");
		//此处可以将username为参数，通过service调用do层方法，传回是否为重名
		boolean result = false;//具体后台方法，此处演示Ajax异步提交以一个值代替
		if(result) {
			response.getWriter().print(true);
		}
		else 
			response.getWriter().print(false);
		response.getWriter().close();
	}
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(req, resp);
	}
}

XML配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">

  <servlet>
  <servlet-name>CheckName</servlet-name>
  <servlet-class>com.servlet.UsernameCheck</servlet-class>
  </servlet>
  <servlet-mapping>
  <servlet-name>CheckName</servlet-name>
  <url-pattern>/check</url-pattern>
  </servlet-mapping>
</web-app>

大致实现效果