Jquery Ajax用户检验用户是否存在的例子

最新推荐文章于 2021-06-05 01:39:16 发布

灵嗅

最新推荐文章于 2021-06-05 01:39:16 发布

阅读量1.7k

点赞数

分类专栏： web前端开发

本文链接：https://blog.csdn.net/yejin191258966/article/details/19283761

版权

web前端开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

大家都知道Jquery其实就是javascript一个框架。

框架就是为了方便我们开发，要实现他里面的功能我们只需要调用相应的方法就可以啦。

现在几乎所有的网站注册，都会提前的检查用户是否存在。这样可以让用户对自己的网站

或者程序有更好的体验。不浪费服务器的资源，也不浪费用户的时间。

下面，我在这里使用jquery怎么做用户检查是否存在做个笔记吧！只是笔记，如果又不好的地方希望包含！

ajax的用户检查过程，其实是一个表单提交的过程。只是，通过javascript的一些事件触发，不用刷新页面就可以得到后台返回的结果。

这个例子是基于servlet+ajax+jsp的。

步骤：

1、在JSP页面中导入jquery的标签库。

2、获取表单中需要检查的对象如：如果你要检查用户是否存在就是获取用户输入的表单对象

3、判断判断表单的值是否为空

4、提交表单

5、获取返回结果显示到页面指定的位置

6、创建一个servlet对象

6.1接收冲ajax提交过来的数据进行处理

6.2创建一个输出流，进行写出写出的格式有很多种：可以是String类型，json，xml，html。

开始吧。

JSP页面

%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>ajax 测试</title>
    <script type="text/javascript" src="<%=path%>/js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
    	$(function(){
			$(":input[name=username]").change(function(){
				var val = $(this).val();
			
				val = $.trim(val);
				
				if(val != ""){
				
					var url = "<%=path%>/user";//注意这里的路径一定要添加绝对路径
					var args = {"username":val,"time":new Date()};
					$.post(url,args,function(data){
						$("#message").html(data);
					});
				}
			});
        })
    </script>
  </head>
  
  <body>
    <form action="" method="post">
    	用户名：<input type="text" name="username"/>
    	<div id="message"></div>
    	<br/><br/>
    	<input type="submit" value="SUBMIT"/>
    </form>
  </body>
</html>

创建一个servlet

package action;

import java.io.IOException;
import java.util.Arrays;
import java.util.List;

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 {
		this.doPost(request, response);
	}

	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		List<String> usernames = Arrays.asList("aaa","bbb","ccc");
		System.out.println("ajax访问了Ajax");
		String username = request.getParameter("username");
		String result = null;
		if(usernames.contains(username)){
			result = "<font color='red'>该用户已经存在</font>";
		}else{
			result = "<font color='red'>该用户已可以注册</font>";
		}
		response.setContentType("text/html;charset=UTF-8");
		response.setCharacterEncoding("UTF-8");
		response.getWriter().print(result);
	}

}

搞定。

有什么问题请给我留言。谢谢大家.