Ajax即使验证用户名是否可用(实例)

最新推荐文章于 2025-09-05 11:31:06 发布

原创最新推荐文章于 2025-09-05 11:31:06 发布 · 574 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #jquery #框架 #function #callback #input

Ajax 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种利用jQuery框架实现网页中用户输入随机验证的方法。通过调用check.js脚本文件并结合后端UserService进行数据交互，实现了对用户输入的即时反馈。当用户尝试验证用户名是否可用时，系统会检查用户名是否存在，并给出相应提示。

一般的做页面中的随机验证，都需要使用jquery这个小框架。因为用起来比较方便...

所以我也用jquery这个框架，首先呢，我新建了一个包，js 添加这个框架。

<mce:script type="text/javascript" src="js/check.js" mce_src="js/check.js"></mce:script>  <mce:script type="text/javascript" src="js/jquery-1.5.js" mce_src="js/jquery-1.5.js"></mce:script>

页面的内容

<body>  注册用户名：<input id="userName" type="text"> <input type="button" value="验证是否存在" onclick="check()">  <span id="resout"></span> </body>

check.js 文件的内容

function check() { // $("#userName") 获得一个节点 val() 是获得节点里边的值 var username = $("#userName").val(); //$.get 是提交返回值:XMLHttpRequestjQuery.get(url, [data], [callback], [type]) //关于这些都可以查看jQuery帮助文档得到一些很好的解决 $.get("UserService?username="+username,null,function (data){$("#resout").html(data)}) }

UserService 的代码

package com.shoube.service; 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; @SuppressWarnings("serial") public class UserService 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 { response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); out .println("<!DOCTYPE HTML PUBLIC /"-//W3C//DTD HTML 4.01 Transitional//EN/">"); String username = request.getParameter("username"); if (username==null||username.length()==0) { out.println("用户名不能为空..."); }else{ if (username.equals("a")) { out.println("用户名["+username+"]已经存在，请换其他的用户名把..."); }else{ out.println("用户名["+username+"]不存在，可以使用此用户名..."); } } } }