利用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技术 实现用户注册。的更多相关文章
- 利用jsp技术实现用户注册
利用jsp技术实现用户注册,包含register.html和register_check.jsp页面代码1. [代码]J2EE实验 <!DOCTYPE html PUBLIC " ...
- 14.javaweb AJAX技术详解
一.简介 1, ajax:在不重新加载网页的前提下,与服务器交换数据并更新部分网页的技巧,但其本身并不是一种新技术 2, 核心:XMLHttpRequest对象.AJAX技术主要是通过此对象完成的 ...
- nodejs利用ajax实现网页无刷新上传图片
nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...
- 【SSH网上商城项目实战28】使用Ajax技术局部更新商品数量和总价
转自: https://blog.csdn.net/eson_15/article/details/51487323 昨天把项目部署了一下,玩了玩,今天完善了一下购物车中修改商品数量就能局部 ...
- Web应用程序开发，基于Ajax技术的JavaScript树形控件
感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用, ...
- ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动，还有从数据库中获得
今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术 即,AJAX是一个[局部刷新 ...
- Java之Ajax技术
ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...
- 特定场景下Ajax技术的使用
ajax介绍 jax技术包含了几种技术:javascript.xml.css.xstl.dom.xhtml和XMLHttpRequest七种技术,所以ajax就像是粘合剂把七种技术整合到一起,从而发挥 ...
- ajax技术基础详解
一.概述 1.什么是ajax 可以与服务器进行[异步]交互的技术,浏览器无需刷新 2.什么时候出现ajax? -- XMLHttp 微软 1999年微软公司发布IE5版本,内嵌了ajax技术 什么时候 ...
随机推荐
- 微信公众号开发C#系列-10、长链接转短链接
1.概述 短网址的好处众多,便于记忆,占用字符少等,现在市面上出现了众多的将长网址转变为短网址的方法,但是由于他们都是小的公司在幕后运营,所以很不靠谱,面对随时关闭服务的可能,这样也导致我们将转换好了 ...
- [翻译] EF Core in Action 关于这本书
Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Cor ...
- IO 和 NIO 的思考
输入输出是操作系统不可或缺的一部分,大致分为两类:面向磁盘和面向网络.在 Java 中有3种 I/O 类型:BIO.NIO 和 AIO,分别是同步阻塞.同步非阻塞和异步非阻塞 I/O,这里着重描述 B ...
- k8s网络之Flannel网络
k8s网络主题系列: 一.k8s网络之设计与实现 二.k8s网络之Flannel网络 三.k8s网络之Calico网络 简介 Flannel是CoreOS团队针对Kubernetes设计的一个网络规划 ...
- Python编程从入门到实践笔记——类
Python编程从入门到实践笔记——类 #coding=gbk #Python编程从入门到实践笔记——类 #9.1创建和使用类 #1.创建Dog类 class Dog():#类名首字母大写 " ...
- C#属性标记Order执行顺序备忘录
部分Attribute有实现IOrderedFilter,其执行顺序机制例子: /// <summary> /// 密码修改 /// </summary> /// <pa ...
- Microsoft.Office.Interop.Excel 报错
Microsoft.Office.Interop.Excel 报错 引用dll 在以下目录 C:\Windows\assembly\GAC_MSIL\Microsoft.Office.Interop. ...
- Dubbo和Spring Cloud微服务架构'
微服务架构是互联网很热门的话题,是互联网技术发展的必然结果.它提倡将单一应用程序划分成一组小的服务,服务之间互相协调.互相配合,为用户提供最终价值.虽然微服务架构没有公认的技术标准和规范或者草案,但业 ...
- Error fetching https://gems.ruby-china.org/: bad response Not Found 404 (https://gems.ruby-china.org/specs.4.8.gz) 报错解决办法
执行换源操作 gem source -a https://gems.ruby-china.org/ 时报错: Error fetching https://gems.ruby-china.org/: ...
- css的三种书写方式
一.内联样式 <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> 二 ...