jquery中ajax的使用

最新推荐文章于 2024-03-13 07:00:00 发布

原创最新推荐文章于 2024-03-13 07:00:00 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

05 jquery 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种利用JavaScript和Ajax进行实时表单验证的方法，并通过Servlet实现了服务器端的账号唯一性检查。用户输入信息时即可得到即时反馈，提高了用户体验。

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

列：实现输入文本的验证

导入库文件

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
      $(function(){
    	 
    		  $('#loginName').bind('blur',function(){
    			  var v_loginName=$(this).val();
    			  $.ajax({
    				  type:"POST",
    				  url:"checkname.do",
    				  data:"loginName="+v_loginName,
    				  dataType:"json",
    				  success: function(data){
    					  //回调函数
    					 // alert(data)
    					 if(!data){
    						 $('#message').text("对不起这个账号巳经被使用请更换例如"+v_loginName+"123");
    						 $('#message').attr("color","red");
    					 }else{
    						 $('#message').text("恭喜你这个账号可以使用");
    						 $('#message').attr("color","green");
    					 }
    				  },
    				  //服务器出错了(如服务器代码出错)
    				  error: function(){
    					 $('#message').text('对不起!服务器崩溃了!请联系管理'); 
    				  }
    			  });
    			 
    		  });
      });


</script>
</head>
<body>
    账号:<input type="text" name="loginName" id="loginName"/><span><font id="message"></font></span>
</body>
</html>

CheckNameServlet.java

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 CheckNameServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
//checkname.do
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		System.out.println("xxxxxxxxxxxxxxxxx");
		request.setCharacterEncoding("utf-8");
		String loginName=request.getParameter("loginName");
		//int x=100/0;   //异常
		if("liayin".equals(loginName)){
			request.setAttribute("data", false);
			request.getRequestDispatcher("data.jsp").forward(request, response);
			return ;
		}
		request.setAttribute("data", true);
		request.getRequestDispatcher("data.jsp").forward(request, response);
	}

}

data.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
${data}

结果：

列：表单验证

form.jsp

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>

<script type="text/javascript">
       $(function(){
    	     $('#bt').bind('click',function(){
    	    	 var v_loginName=$('#loginName').val();//获取文本框的值
                 //tirm 去掉首尾空格
    	    	 if($.trim(v_loginName)==""||$.trim(v_loginName).length<6){
    	    		 alert('登录名不能为空或长度必须在6-30');
    	    		 return false;
    	    	 }
    	    	 
    	    	 var v_password=$('#password').val();
    	    	 if($.trim(v_password)==""||$.trim(v_password).length<6){
    	    		 alert('密码不能为空或长度必须在6-30');
    	    		 return false;
    	    	 }
    	    	 
    	    	 var v_pwd=$('#psw').val();
    	    	 if($.trim(v_pwd)!=$.trim(v_password)){
    	    		 alert('密码与确认密码不同');
    	    		 return false;
    	    	 }
    	     });
       });
</script>
</head>
<body>
     <form action="addUser.do" method="post">
      账号:<input id="loginName" maxlength="30"/><br>
      密码:<input id="password" maxlength="30"/><br>
      确认密码:<input id="psw"/><br> 
     <input type="submit" value="注册" id="bt"/>
     </form>
</body>
</html>