利用ajax技术 实现用户注册。
生活随笔
收集整理的這篇文章主要介紹了
利用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方式