发表于： 2020-07-10 23:28:41
1 1902
今天完成的事情：
学习Ajax异步请求：
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
传统请求：基于form表单提交 地址栏直接访问 超链接 等请求方式都是传统请求。
特点：请求之后会刷新整张页面。
缺点：1.请求之后会刷新整张页面，导致用户的操作被中断，影响用户体验。
2.请求之后会刷新整张页面，导致页面中所有资源都需要通过网络重新下载造成极大的网络资源浪费。
异步请求：基于Ajax发起的请求全部属于异步请求。
特点：请求之后，页面不动，响应回来刷新页面。
Ajax编程思路：
1.创建XMLHttpRequest核心对象，简称xhr
xhr是一个js对象，存在浏览器差异
window.XMLHTTPRequest ===> true|webkit内核 false|ie系内核
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();//true webkit
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
2.发送请求，并传递参数
xhr.open("GET","${pageContext.request.contextPath}/check?username=" + username);//设置请求方式和请求路径
xhr.send();//发送请求
如果时POST、参数传递则放到send中
3.处理响应，并更新页面布局
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status ==200){
console.log(xhr.responseText);//响应结果
}
这里写了一个简单的异步请求：
<%@page contentType="text/html; UTF-8" isELIgnored="false" pageEncoding="UTF-8" %>
<html>
<head>
<title>Title</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function () {
//1.绑定用户名失去焦点事件
$("#username").blur(function () {
//1.获取用户输入值
var username = $(this).val();
//2.发送Ajax的get方式请求
//a.创建xhr对象
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();//true webkit
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//b.发送请求并传递参数
xhr.open("GET","${pageContext.request.contextPath}/check?username=" + username);//设置请求方式和请求路径
xhr.send();//发送请求
//c.处理响应并更新局部页面
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status ==200){
console.log(xhr.responseText);//响应结果
$("#msg").text(xhr.responseText);
}
}
});
});
</script>
</head>
<body>
<form action="">
用户名：<input type="text" id="username"><span id="msg"></span> <br>
</form>
</body>
</html>
@RequestMapping("check")
public String checkName(String username, HttpServletResponse response) throws IOException {
Account account = accountService.selectAccount(username);
if(account != null){
response.getWriter().println("username is exist");
}else{
response.getWriter().println("username is not exist");
}
return null;
}
效果是前端用户名表单失去焦点时将输入的用户名传到后台，然后在数据库中查询该用户是否存在，并将结果返回前端页面输出，并且页面没有刷新：
对于任务大概有了一些头绪。
任务需要的就是点击按钮发送一个异步请求，并将输入的手机号传到后台
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function () {
$("#getSms").click(function () {
//1.获取用户输入的手机号
var phone = $("#phone").val();
//2.发送Ajax的get方式请求
//a.创建xhr对象
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();//true webkit
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//b.发送请求并传递参数
xhr.open("GET","${pageContext.request.contextPath}/getSms?phone=" + phone);//设置请求方式和请求路径
xhr.send();//发送请求
//c.处理响应并更新局部页面
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);//响应结果
$("#msg").text(xhr.responseText);
}
}
})
});
</script>
<div class="container">
<h1 style="color: white; margin: 0; text-align: center">注 册</h1>
<form action="register" method="post">
<label>用户名<input type="text" name="username" placeholder="请输入用户名"/></label><br>
<label>密码 <input type="password" name="password" placeholder="请输入密码" /></label><br>
手机 <input type='text' onkeyup=" value=value.replace(/^(0+)|[^\d]+/g,'')" name="phone" placeholder="请输入手机号" id="phone"><input type="button" id="getSms" onclick="" value="获取短信验证码"/><br>
<label>验证码 <input type="text" name="sms" /></label><span id="msg"></span><br>
<input type="submit" value="注册"/>
<p class="change_link">
<span class="text">已经有账户?</span>
<a href="/task7/tologin" class="to_login"> 去登录 </a>
</p>
</form>
</div>
Controller层修改：
@RequestMapping("getSms")
public String getSms(String phone,HttpServletResponse response) throws IOException {
SDKTest sdk = new SDKTest("8aaf0708732220a601732c5089d8053c","e68ee368f4f44f8882580eeb4797e56c");
sdk.getSMS(phone);
response.getWriter().println("验证码已发送");
return null;
}
效果：
成功接收短信，并且页面也没有刷新！
接下来只要实现验证码校验功能即可。
校验功能：
可以在SDK接口中就将验证码存入memcached缓存中，设置失效时间（5分钟或30分钟），然后前端接收到用户输入的验证码与缓存中的对比，若一致则注册成功，若不一致则注册失败.
package com.jnshu.util;
import com.cloopen.rest.sdk.CCPRestSmsSDK;
import com.whalin.MemCached.MemCachedClient;
import org.springframework.beans.factory.annotation.Autowired;
import java.util.Date;
import java.util.HashMap;
import java.util.Set;
public class SDKTest {
private String AccountSid;
private String AccountToken;
private String Rand_Code = RandNum.getRandLength(4);
@Autowired
MemCachedClient memCachedClient;
public SDKTest(String accountSid, String accountToken) {
this.AccountSid = accountSid;
this.AccountToken = accountToken;
}
public String getRand_Code() {
return Rand_Code;
}
public boolean getSMS(String phone) {
HashMap<String, Object> result = null;
// 初始化SDK
CCPRestSmsSDK restAPI = new CCPRestSmsSDK();
/* 初始化服务器地址和端口 */
// 沙盒模式 | 内测模式
restAPI.init("sandboxapp.cloopen.com", "8883");
// 生产环境
// restAPI.init("app.cloopen.com", "8883");
/* 初始化主账号和主令牌 ACOUNT SID和AUTH TOKEN在登陆官网后，在“应用-管理控制台”中查看开发者主账号获取 */
restAPI.setAccount(AccountSid, AccountToken);
/* 初始化应用ID 应用ID的获取：登陆官网，在“应用-应用列表”，点击应用名称，看应用详情获取APP ID */
restAPI.setAppId("8aaf0708732220a601732c508ad70542");
/* 发送短信 */
//*第一个参数:是要发送的手机号码，可以用逗号分隔，一次最多支持100个手机号 *
//*第二个参数:是模板ID，在平台上创建的短信模板的ID值；测试的时候可以使用系统的默认模板，id为1。 *
//*系统默认模板的内容为“【云通讯】您使用的是云通讯短信模板，您的验证码是{1}，请于{2}分钟内正确输入”*
//*第三个参数是要替换的内容数组。
/* 给17050071261按照官网模板 1 发送验证码 6543 5分钟后失效 */
result = restAPI.sendTemplateSMS(phone, "1", new String[]{Rand_Code,"5"});
System.out.println("生成的验证码为" + Rand_Code);
memCachedClient.set("code"+ phone,Rand_Code,new Date(1000*60));
System.out.println("存入缓存的值为：" + memCachedClient.get("code"+ phone));
/* 输出发送返回信息 */
System.out.println("SDKTestGetSubAccounts result=" + result);
if("000000".equals(result.get("statusCode"))){
//正常返回输出data包体信息（map）
HashMap<String,Object> data = (HashMap<String, Object>) result.get("data");
Set<String> keySet = data.keySet();
for(String key:keySet){
Object object = data.get(key);
System.out.println(key +" = "+object);
}
return true;
}else{
//异常返回输出错误码和错误信息
System.out.println("错误码=" + result.get("statusCode") +" 错误信息= "+result.get("statusMsg"));
return false;
}
}
}
注册接口：
@RequestMapping(value = "register", method = RequestMethod.POST)
public String register(Account account, String code, Model model,HttpServletRequest request) {
logger.info(account);//输入的账户信息
logger.info("验证码：" + code);//输入的验证码
//首先判断验证码是否正确
if (code.equals(memCachedClient.get("code" + account.getPhone()))) {
logger.info("验证码正确");
//判断账号密码是否为空
if (account.getUsername().length() != 0 && account.getPassword().length() != 0) {
//判断该账号是否存在
if (accountService.selectAccount(account.getUsername()) == null) {
logger.info("加密前密码为：" + account.getPassword());
//对密码进行加密
String pswMD5 = MD5Util.generate(account.getPassword());
logger.info("加密后密码为：" + pswMD5);
account.setPassword(pswMD5);
account.setImg("asd");
account.setEmail("www.asdas.com");
account.setCreateat(1L);
account.setCreateby("管理员");
account.setUpdateat(1L);
account.setUpdateby("管理员");
accountService.insert(account);
model.addAttribute("error", "注册成功");
return "login";
} else {
model.addAttribute("error", "该账号已存在！");
return "register";
}
} else {
model.addAttribute("error", "账号和密码不能为空！");
return "register";
}
}else {
logger.info("验证码错误");
model.addAttribute("error","验证码错误！");
return "register";
}
}
测试一下：
添加手机验证码功能实现成功。
收获：
学会了使用Ajax异步请求，完成了整合验证码。
明天计划完成的事情：
加入手机号登录功能。加入邮箱，以及图片的。
返回列表
评论