如何通过ajax技术实现局部刷新？_ajax刷新局部页面-优快云博客

本文介绍了一个简单的用户注册验证系统实现方法，通过HTML、JavaScript和AJAX技术完成前端用户输入验证，并利用Servlet进行后台处理。示例中详细展示了如何通过前端实时检查用户名是否已被占用的过程。

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

注意点

xml文件中的 url 路径要和$.ajax({ "url":}) 保持一致

index1.html

<!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>注册</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
       $("#name").blur(function(){
         var name=this.value;
         if(name==null || name==""){
         	$("#nameDiv").html("用户名不能为空！");
         }else{
         
           $.ajax({
              "url":"userServlet",   //要提交的路径
               "type":"post",  //请求方式
               "data":"name="+name, //要发送的数据
               "dataType":"text",  //指定返回数据格式
               "success": callback, //响应成功后要执行的函数
               "error":function(){
                alert("验证有误，请重新输入");	
               }
           });
           function callback(data){
           	if(data=="true"){
           	  $("#nameDiv").html("用户名已存在");
           	}else{
           		 $("#nameDiv").html("用户名可以使用");
           	}
           }
         }
       })
   })

	
 
    
	   
</script>
</head>
<body>
	<form action="" id="form1">
		<table>
			<tr>
				<td>用 户 名：</td>
				<td><input type="text" name="name" id="name"
					onblur="validate();" /> <font color="#c00fff">*</font></td>
				<td>
					<div id="nameDiv" style="display: inline"></div></td>
			</tr>
		</table>
	</form>
</body>
</html>

userServlet.java

package web12;

import java.io.IOException;
import java.io.PrintWriter;

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

public class userServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
          String name=request.getParameter("name");
          boolean used=false;
          
          if("ajax".equals(name)){
        	  used=true;
          }else{
        	  used=false;
          }
          response.setContentType("text/html;charset=UTF-8");
          PrintWriter out=response.getWriter();
          out.print(used);
          out.flush();
          out.close();
          
		
	}

	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
          request.setCharacterEncoding("utf-8");
	     this.doGet(request, response);
	}

}