一、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技术 实现用户注册。的更多相关文章

  1. 利用jsp技术实现用户注册

    利用jsp技术实现用户注册,包含register.html和register_check.jsp页面代码​1. [代码]J2EE实验    <!DOCTYPE html PUBLIC " ...

  2. 14.javaweb AJAX技术详解

    一.简介 1,  ajax:在不重新加载网页的前提下,与服务器交换数据并更新部分网页的技巧,但其本身并不是一种新技术 2,  核心:XMLHttpRequest对象.AJAX技术主要是通过此对象完成的 ...

  3. nodejs利用ajax实现网页无刷新上传图片

    nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...

  4. 【SSH网上商城项目实战28】使用Ajax技术局部更新商品数量和总价

         转自: https://blog.csdn.net/eson_15/article/details/51487323 昨天把项目部署了一下,玩了玩,今天完善了一下购物车中修改商品数量就能局部 ...

  5. Web应用程序开发，基于Ajax技术的JavaScript树形控件

    感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用, ...

  6. ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动，还有从数据库中获得

    今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新 ...

  7. Java之Ajax技术

    ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...

  8. 特定场景下Ajax技术的使用

    ajax介绍 jax技术包含了几种技术:javascript.xml.css.xstl.dom.xhtml和XMLHttpRequest七种技术,所以ajax就像是粘合剂把七种技术整合到一起,从而发挥 ...

  9. ajax技术基础详解

    一.概述 1.什么是ajax 可以与服务器进行[异步]交互的技术,浏览器无需刷新 2.什么时候出现ajax? -- XMLHttp 微软 1999年微软公司发布IE5版本,内嵌了ajax技术 什么时候 ...

随机推荐

  1. count()聚合函数正确用法

    count()聚合计算 count()是聚合函数,对于返回的结果集,一行行地判断,累计值加1,最后返回累计值,count(*).count(主键ID)和count(1)表示返回满足条件的结果集的总行数 ...

  2. Python：解析PDF文本及表格——pdfminer、tabula、pdfplumber 的用法及对比

    pdf 是个异常坑爹的东西,有很多处理 pdf 的库,但是没有完美的. 一.pdfminer3k pdfminer3k 是 pdfminer 的 python3 版本,主要用于读取 pdf 中的文本. ...

  3. 并发系列（3）之 CLH、MCS 队列锁简介

    这篇博客主要是作为 AbstractQueuedSynchronizer 的背景知识介绍:平时接触也非常的少,如果你不感兴趣可以跳过:但是了解一下能更加的清楚 AQS 的设计思路: 一.自旋锁简介 通 ...

  4. Spring基础学习，附例子代码讲解

    什么是Spring.IOC.AOP.DI?     Spring是一个基于IOC和AOP的结构J2EE系统的框架.     IOC(Inversion Of Control)控制反转(Spring的基 ...

  5. SLAM+语音机器人DIY系列：（三）感知与大脑——6.做一个能走路和对话的机器人

    摘要 在我的想象中机器人首先应该能自由的走来走去,然后应该能流利的与主人对话.朝着这个理想,我准备设计一个能自由行走,并且可以与人语音对话的机器人.实现的关键是让机器人能通过传感器感知周围环境,并通过 ...

  6. 25 ,CSS 构造表格

    1. 表格的基础构造 2. 边距和边线应用 3. 隐藏和删除应用 1.  简单表格 table { width:auto; border-collapse:collapse; margin-left: ...

  7. 复活广州.net俱乐部

    上个月张队长在深圳搞了一场活动,我们广州这边的.net粉丝也去了几个,我刚好有辆破车,于是我们一车会合后出发去深圳参加活动了,和大家在车上的交流使我感触良多.只说几点和本文相关的: .net在中国的生 ...

  8. C#中++i与i++的区别

    日常编程中经常用到++i与i++,知识点虽然很小,但有时候会犯迷糊,在这里小小的记录一下. ++i 即前递增,顾名思义也就是先自增后传值: 举个栗子 int i=5; int j=++i; 此时i的值 ...

  9. C#标识符与关键字

    标识符是指在程序中用来表示实物的单词,是分配给类型(类.结构.枚举.接口或委托).成员.变量或命名空间的名称.有效标识符必须遵循以下原则: 标识符不能以数字开头也不能包含空格: 标识符可以包含大小写字 ...

  10. SQL Server系统表sysobjects介绍

    SQL Server系统表sysobjects介绍 sysobjects 表结构: 列名 数据类型 描述 name sysname 对象名,常用列 id int 对象标识号 xtype char(2) ...