ajax实现表单用户名校验

来源：互联网发布：hbase查找数据过程编辑：程序博客网时间：2024/06/05 22:49

转载▼

步骤如下：

1.新建一个html页面，此处是ajax.html

2.新建一个servlet做后台处理

3.新建一个js页面，verify.js

ajax.html代码：

<html>
<head>
    <title>用户校验ajax</title>
    <script type="text/javascript" src="jslib/jquery.js"></script>
    <script type="text/javascript" src="jslib/verify.js"></script>
</head>
<body>

用户校验的ajax实例，请输入用户名：<br/>
         
         
         <input type="text" id="userName"/>
         <input type="button" value="校验" onclick="verify()"/>
         
         
         <div id="result"></div>

</body>
</html>

说明：

这里面引入了jquery库文件，使用jquery可以省去大量的js代码，同时引入自定义的js文件verify.js。ajax方式下不需要使用表单进行数据提交，因此可以省去form，当然也可以写上去。ajax方式不需要name属性，但需要一个id属性，便于在js代码中通过id获得属性的值。在按钮处添加验证函数，取得验证信息。最后需要一个提示标签用于存放服务器返回的信息。此处用了<div>当然也可用用<span>标签，两者的区别是前者具有换行功能，后者不具备。前者常用语显示一句话，后者常用语显示一段话。

servlet代码：

public class AjaxServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            response.setContentType("text/html;charset=utf-8");
            PrintWriter out = response.getWriter();

            //1.取得页面参数信息
            String old = request.getParameter("name");
            //2.检查参数是否有问题
            if (old == null || old.length() == 0) {
                out.println("用户名不能为空");
            } else {
                //3.校验操作
                String name = old;
                if (name.equals("zqc")) {
                //4.和传统应用不同之处，这一步需要将用户感兴趣的数据返回给页面，

                //而不是跳转到一个新页面MDC模式
                    out.println("用户名[" + name + "]已经存在,请使用其他用户名");
                } else {
                    out.println("用户名[" + name + "]尚未存在,可以使用该用户名");
                }
            }

        } catch (Exception e) {
            e.printStackTrace();
        }

}

    @Override
    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        doGet(httpServletRequest, httpServletResponse);
    }
}

说明：

后台部分注意4点即可：代码中已注明。1.取得页面参数信息。2.检查产生是否有效。3.校验参数。4.显示信息。当然还需要处理页面编码问题，要不会出现乱码。

verify.js代码：

function verify(){
    //首先测试一下页面的按钮按下，可以调用这个方法
    //使用js的alert方法，显示一个弹出提示
    //alert("按钮被点击了！！！");

    //1.获取文本框中的内容
    //document.getElementByIdx_x("userName"); dom的方式获得id
    //jquery的方式获得页面节点，参数中#加上id属性值可以找到一个节点
    //jquery的方法返回的都是jquery的对象，可以继续在上面只写其他的jquery对象
    var jqueryObj = $("#userName") ;
    //获得节点的值
    var userName = jqueryObj.val();

    //验证userName是否取到了
   // alert(userName);
    //2.将文本框中的数据发送给服务器端的servlet
    //使用jquery的XMLHTTPrequest对象请求的封装
      $.get("AjaxServlet?name=" + userName,null,callback);

}

//回调函数
function callback(data){
   // alert("服务器端的数据回来了！");
     //3.接收服务器端返回的数据
    //alert(data);
    //4.将服务器返回的数据动态显示到页面上
    //找到保存结果信息的节点
    var resultObj = $("#result");
    //动态改变页面中div节点中的内容
    resultObj.html(data);
说明：

此部分主要是4点：1.获取文本框中内容。2.将文本框中的数据发送给服务器端的servlet。3.接收服务器端返回的数据。4.将服务器返回的数据动态显示到页面上。这里使用了jquery的一些代码。可以到jquery的官网下载相关api和库文件。jquery官网：www.jquery.com

0 0