利用ajax技术实现用户注册。

一、ajax？
　　异步加载技术，在不刷新网页的前提下，实现部分网页内容的更新！
　　AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
　思考？
注册界面刚好可以应用此场景。在填写相关信息的时候，无需多次请求页面，实施验证。
二、之前通过form表单提交，现在完全使用ajax。就要将form表单的提交方式清除掉，form标签和 submit 修改。
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"+"views/";
%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注册 - 贵美·商城</title>
        <base href="<%=basePath%>">
         <link rel="icon" href="img/icon.png" type="image/x-icon">
        <link rel="stylesheet" type="text/css" href="css/register.css"/>
    </head>
    <body>
        <div class="wrap">
            <div class="guimeilogo"></div>
            <div class="register">
                <div class="top">
                    <h1>新用户注册</h1>
                    <a href="/shop/views/login.jsp">已有账号</a>
                </div>

                <div class="mid">
                    <div style="color: red">${error}</div>

                    <%--给表单添加id --%>
                    <form  id="regForm">

                        <%--在这里添加提示信息 1.成功注册   2.失败注册--%>
                        <div id="showMsg"></div>
                        <input type="text" name="username" id="username" placeholder="用户名" required="required"/>
                        <input type="password" name="password" id="password" placeholder="密码" required="required" />
                        <input type="password" name="reppw" id="reppw" placeholder="重复密码" required="required" />
                        <input type="text" name="telephone" id="telephone" placeholder="手机号" required="required"/>
                            <div class="sec">
                                <input type="text" name="code" id="code" placeholder="验证码" required="required" />
                                <a  class="send" onclick="send()"> 发送验证码 </a>
                            </div>
                            <div id="nick"></div>
                        <input type="text" name="nickname" id="nickname" placeholder="亲，您的昵称" required="required" />
                        <input type="text" name="email" id="email" placeholder="亲，您的邮箱" required="required"/>

                            <%--
                                使用ajax技术 将注册按钮由 submit  修改为button  给他一个id  submit  添加鼠标点击事件
                            --%>
                        <input type="button" id="submit" value="注册"/>
                    </form>
                </div>
            </div>
        </div>
            <%--导入JS包--%>
        <script src="js/jquery-2.1.0.js"></script>
    <script >
        submit.onclick=function(){
            $.post("/shop/register",{
                "username":$("#username").val(),
                "password":$("password").val(),
                "telephone":$("telephone").val(),
                "code":$("code").val(),
                "nickname":$("nickname").val(),
                "email":$("email").val()
            },function (data) {
                if (data.code == 555){
                    $("#showMsg").html("用户名 已经被注册过").css("color","red");
                }else {
                    if(confirm("恭喜您注册成功 是否跳转登录界面？")){
                        window.location.href = "/shop/views/login.jsp";
                    }
                }
            })
        }
        /*
            用户： 输入用户名完毕后    鼠标离开后   立刻提交用户名是否可用   给用户提示

            1.给username 输入框  添加失去焦点的事件  onblur
                    username.onblur=function () {
                        alert(username.value)
                    }
            2.获取用户输入的数据 value

            3.通过ajax 将用户输入的用户名发送给服务器   注意  涉及到函数  需要导入js的包  jQuery-2.1.0.js


                $.post("url" ,"参数"，function(data){});
                $.post("/shop/CheckUsername",{username:username.value},function (data)
                                {username:username.value}
            4.接受服务器返回响应

            5.将回传的值  展示到页面中

            后台？
                1.接收请求的参数
                2.通过 dao 检验用户名是否可用
                3.将校验结果  响应给浏览器
         */
        //1.给username 输入框 添加时期焦点事件  通过id的方式
        username.onblur=function () {
            //2.通过ajax 将用户的用户名发送给服务器
            $.post("/shop/checkUsername",{username:username.value},function (data) {
                if (data.code == "1044"){
                    $("#showMsg").html("用户名 已经被注册过").css("color","red");
                } else{
                    $("#showMsg").html("此用户名 可以注册").css("color","green");
                }
            })
        }
        // 为用户名  添加校验  鼠标离开事件 onblur
        nickname.onblur=function () {
            $.post("/shop/checkNickname",{nickname:nickname.value},function (data) {
                if (data.code == "10444"){
                    $("#nick").html("昵称已被注册").css("color","red");
                }else{
                    $("#nick").html("该昵称  可以注册").css("color","green");
                }
            })
        }



        if ("${success}"=="注册成功"){
            if(confirm("注册成功，是否登录？")){
                window.location.href="/shop/views/login.jsp";
            }
        }
    </script>
    </body>
</html>
<script>
    function send(){
        $.post("/shop/spendCode",{"telephone":telephone},function (data) {

        });
    }
</script>
利用ajax技术 实现用户注册。

猜你喜欢

利用ajax技术实现用户注册。
