利用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 输入框 添加失去焦点的事件 onblurusername.οnblur=function () {alert(username.value)}2.获取用户输入的数据 value3.通过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>转载于:https://www.cnblogs.com/ZXF6/p/10791253.html
利用ajax技术 实现用户注册。相关推荐
- ajax技术怎么应用程序,利用AJAX技术开发应用程序.pdf
维普资讯 2008年6月 电 脑 学 习 第3期 利用AJAX技术开发应用程序 蔡燕敏' 摘 要:介绍了AJAx技术的概念.工作原理及使用AJAX技术的基本原则．讨论了AJAx技术在应用程序的开发过 ...
- Asp.Net 上传大文件专题(4)--利用ajax技术显示上传进度
====================================================== 注:本文源代码点此下载 ================================= ...
- html实现在线搜歌,利用Ajax技术实现在线歌词搜索功能
最新制作完成的在线歌词搜索功能,利用ajax技术,无刷新显示歌词,只需要输入你要查找的歌曲名或歌词.界面还不是很好看,完善中...... 1 2 3 4 5 无标题文档 6 7 8 9 10 22 2 ...
- 利用ajax技术验证邮箱地址
验证步骤: 1.获取文本框和显示提示信息的元素 2.给文本框添加失去焦点事件,失去焦点时,检测用户输入的邮箱地址是否符合规则 3.如果不符合规则,阻止程序向下执行并给出提示信息 4.符合规则则向服务器 ...
- 创建基于AJAX技术的Scribble应用程序
简介 ASP.NET Atlas是一套丰富的类库,用于ASP.NET开发AJAX风格的应用程序.本文试图解说Atlas框架的一般性特征,由于Atlas是一个庞大的库,故本文集中探讨Atlas的两个最重 ...
- jquery如何实现ajax技术,使用JavaScript和jQuery简单实现Ajax技术(示例代码)
Ajax的定义 Ajax被认为是(Asynchronous JavaScript and XML的缩写). 允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. Ajax的工作原理 Aja ...
- Web 2.0中AJAX技术应用详解[转]
今年互联网上比较火热的话题当然是关于WEB2.0的应用,其中AJAX又是WEB2.0的核心之一.AJAX是Asynchronous JavaScript and XML 的缩写.它并不是一门新的语言或 ...
- ajax技术原理 F7300178 qrx
ajax技术原理 AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是指一种创建交互式 ...
- ajax技术原理及工作原理
AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. 主要包含了以下几种 ...
最新文章
- 【★】KMP算法完整教程
- php支持gd,png,jpeg,zlib
- 使用DDD、事件风暴和Actor来设计反应式系统
- Linux环境下创建运行.java文件
- 学校计算机房 作文,第一次去机房作文
- java applet布局_Java:Applet布局问题
- MyBatis出现红色错误，已解决（Establishing SSL connection without）
- Python—什么是duck type鸭子类型
- Github desktop界面全白怎么办？[已解决]
- yum 报错:Another app is currently holding the yum lock; waiting for it to exit......
- Mac 终端使用自动补全时忽略大小写
- Matlab 绘制 BP 神经网络图
- Java内部类介绍 - 局部内部类和匿名内部类
- 如何在arm-linux下支持2T硬盘
- 试简述smtp通信的三个阶段的过程_通信原理简答题汇总
- MySQL-DQL语句
- 这样的成品app直播源码到手一定会后悔
- 解决2022.3.1版本中 IDEA中 XML文件屎黄色背景 的方法
- 电脑故障维修判断指导大全（联想内部文件）
- 桌面快捷方式图标显示问题