AJAX原型技术展示--用户注册简单版技术演示

来源：互联网发布：淘宝上300的狗能买吗编辑：程序博客网时间：2024/06/07 19:35

AJAX原型技术演示–在此处我们演示的功能简单介绍：
我们简单模仿一个用户注册界面，在进行用户注册时我们把已经被注册过的用户以“该用户名已经被注册，请重新输入”的提示信息显示给用户看，并且注册时返回到不予以注册，当用户输入的用户名可以进行注册时提示“该用户名可以注册”，下面我们使用AJAX原型技术来进行演示此功能。

下面的用户注册我们搞得很简单：只要以“hncu”开头的我们就认为是已经被注册的用户名！
（发送到前端页面的三种信息提示：（1）error=0 代表的是用户没有输入用户名，输出提示：“请输入需要注册的用户名!”（2）error=1 代表的是用户名已经被注册，输出提示：“该用户名已存在,请重新输入!”（3）error=2代表的是用户输入的用户名可以注册，输出提示：恭喜您,该用户名可以注册!）

主页面（index.jsp）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>AJAX技术演示</title>  </head>  <body>    <a href="<%=request.getContextPath() %>/jsps/Reg.jsp">注册页面的表单验证----Ajax原理技术演示 </a>  </body></html>

用户注册页面（Reg.jsp）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>用户注册页面</title>    <script type="text/javascript">        var boo = false;        function sub(){            if(boo){                var f1 = document.getElementById("f1");                f1.submit();//激活按钮的提交功能            }        }        function val(obj){            var name = obj.value;            if(name!=null){                document.getElementById("reg").value = name;//给Ajax提交的值设置到编辑框内            }            document.getElementById("f2").submit();//给编辑框2设置提交按钮功能        }        function back(res){            //alert(res);            if(res==1){                boo = false;                msg.innerHTML="该用户名已存在,请重新输入!";            }else if(res==2){                boo = true;                msg.innerHTML="恭喜您,该用户名可以注册!";            }else{                boo = false;                msg.innerHTML="请输入需要注册的用户名!";            }        }    </script>  </head>  <body>    <h2>注册页面的表单验证----Ajax原型技术演示</h2>    <form id="f1" action="<%=request.getContextPath() %>/servlet/Register" method="post">        姓名:<input type="text" name="name" onblur="val(this);" />        <label id="msg" style="color:red;"></label><br/>        密码:<input type="password" name="pwd" /><br/>        确认密码:<input type="password" name="pwd2" /><br/>        电话:<input type="text" name="tel" /><br/>        QQ号码:<input type="text" name="qq" /><br/>        <input type="button" onclick="sub();" value="注册" />    </form>    <!-- 专用于帮我们进行ajax提交用户名的小表单 -->    <form target="fm" id="f2" action="<%=request.getContextPath() %>/servlet/ValServlet" method="post">        <input id="reg" type="hidden" name="name" />    </form>    <iframe name="fm" style="display:none">    </iframe>  </body></html>

Servlet（RegServlet.java）–输出用户的注册信息

package cn.hncu.servlet;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 RegServlet extends HttpServlet {    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        doPost(request, response);    }    public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        request.setCharacterEncoding("utf-8");        String name = request.getParameter("name");        String pwd = request.getParameter("pwd");        System.out.println("注册:"+name+","+pwd);    }}

Servlet（ValServlet.java）–发送给前端页面的提示信息

package cn.hncu.servlet;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 ValServlet extends HttpServlet {    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        doPost(request, response);    }    public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        response.setContentType("text/html;charset=utf-8");        PrintWriter out = response.getWriter();        request.setCharacterEncoding("utf-8");        //进行出错页面的显示        String name = request.getParameter("name");        System.out.println("val:"+name);        if(name==null || name.trim().equals("")){//正式项目，这里要访问后台数据库，以决定用户名是否合法            //out.println("请输入用户名");            //这里我们直接把出错的信息发送给前台页面进行相应的处理            request.setAttribute("error", "0");//表示用户没有输入用户名进行注册操作        }else{            if(name.startsWith("hncu")){                //out.println("该用户名已被注册，请重输入");                request.setAttribute("error", "1");//表示用户名已经被注册            }else{                //out.println("恭喜您！该用户名可以注册");                request.setAttribute("error", "2");//表示用户名能够被注册            }        }        request.getRequestDispatcher("/jsps/ValResult.jsp").forward(request, response);//通过转发操作转发到前台进行处理    }}

前端页面进行提示给用户页面（ValResult.jsp）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>错误结果页面</title>  </head>  <body>    <h2>用户名验证结果页面</h2>    <%        //拿到后台处理的结果erroe        String error = (String) request.getAttribute("error");        out.println(error);    %>    <script type="text/javascript">        //用java代码给js代码传递数据        var res = '<%=request.getAttribute("error")%>';        //alert(res);        /*        if(res==1){            parent.document.getElementById("msg").innerHTML="该用户名已存在,请换一个!";        }else{            parent.document.getElementById("msg").innerHTML="恭喜,该用户名可以注册!";        }        */        parent.back(res);    </script>  </body></html>

效果图展示：
主页面
这里写图片描述

到此已经演示完毕！读者可以进行更深入的拓展！

0 0