当前位置：
首页 >
利用ajax技术 实现用户注册。
发布时间：2025/4/14
43
豆豆
生活随笔
收集整理的这篇文章主要介绍了
利用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技术 实现用户注册。的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： world转.md
- 下一篇： HTTP请求与接收get/post方式