Jpetstore——使用AJAX和jQuery改善用户体验1（账号管理模块）

CSDN下载：基于MVC用JSP/Servlet实现JPetStore——使用AJAX和jQuery改善用户体验

账号管理模块。在新建账号信息页面上使用AJAX进行表单验证，实现“判断用户名是否已存在”功能。

效果图：

实现方法：
首先在jsp页面中使用传统的HTML绑定方法使得其能够运行js事务即检测用户名是否已存在，接下来在js代码中通过XML异步通信技术，将该用户名传到servlet中调用业务逻辑功能访问数据库判断该有户名是否已存在，从servlet中返回一个用户区别用户名是否已存在的变量到js中，再到js中根据该变量的值进行相应的输出，即该用户已存在或者可用。

核心源代码：
jsp：

<input type="text" name="username" id="username"  onblur="usernameIsExist();"/>
<div id="usernameMsg"></div><script type="text/javascript" src="${pageContext.request.contextPath }/js/register.js"></script>

js：

function createXMLHttpRequest(){…………
}
function usernameIsExist() {var username = document.getElementById('username').value;sendRequest("usernameIsExistServlet?username=" + username);
}
function sendRequest(url) {…………
}
function processResponse() {if (xmlHttpRequest.readyState == 4) {if (xmlHttpRequest.status == 200) {var responseInfo = xmlHttpRequest.responseXML.getElementsByTagName("msg")[0].firstChild.data;var div1 = document.getElementById('usernameMsg');if (responseInfo == "Exist") {div1.innerHTML = "<font color='red'>用户名已存在</font>";} else {div1.innerHTML = "<font color='green'>用户名可用</font>";}}}
}

servlet：

tring username = request.getParameter("username");
Account account = new Account();
account.setUsername(username);
AccountService accountService = new AccountService();
response.setContentType("text/xml");
PrintWriter out = response.getWriter();
if(accountService.getAccount(account.getUsername()) != null){out.println("<msg>Exist</msg>");
}else {out.println("<msg>NotExist</msg>");
}
out.flush();
out.close();

完整项目文档及源码请参考：实验二使用AJAX和jQuery改善用户体验

Jpetstore——使用AJAX和jQuery改善用户体验1（账号管理模块）相关推荐

巧用Ajax的beforeSend 提高用户体验--防止重复数据
巧用Ajax的beforeSend 提高用户体验 jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作. 具体可参考j ...
精益设计: 设计团队如何改善用户体验
<精益设计: 设计团队如何改善用户体验> 基本信息原书名:Lean UX: Applying lean principles to improve user experience 作者: ...
【pmcaff】产品经理必知改善用户体验的基本方法
点击上方 "公众号" 可以订阅哦! 如果说影响应用排名的最大因素是什么?那一定是用户体验了.再也没有什么比它更重要的了,但是很多开发商在忙着开发和发布新应用的时候,往往会忽略掉这个 ...
反馈网络信息改善用户体验
为什么80%的码农都做不了架构师?>>> 1.使用下拉刷新控件改善用户体验 1⃣️.UITAbleViewController控件中有一个refreshControl属性,这个 ...
欧洲进出口银行_欧洲对开放银行的推动如何迫使银行应用改善用户体验
欧洲进出口银行 by Michael Gardner 通过迈克尔·加德纳欧洲对开放银行的推动如何迫使银行应用改善用户体验 (How Europe's push for Open Banking is ...
android 启动白屏_从细节入手改善用户体验，Flutter跨平台App开发中设置Android和iOS的启动页
前言 flutter开发App方便快捷,就是冷启动的时候要加载dart引擎有短暂的白屏,严重影响用户体验,这个时候我们就需要设置一个启动图片,想国内大部分App那样(例如微信那个地球),启动App的时 ...
设计电商网站必看，如何改善用户体验
电子商务是一个复杂的系统,很多小伙伴在设计电商网站的时候会遇到不少的问题.作为电子商务的典型模式之一,B2C网上零售网站要考虑的因素很多,有时候很多意想不到的因素都可能决定一个用户最终是否在该网站完成 ...
如何通过文档改善用户体验和客户关系
文档对你的员工和客户来说都是一个宝贵的信息来源.你策划和分享的每一个教程."如何做 "的文章和指南都可以改善用户体验和客户关系. 在这个数字时代,每个人都希望立即得到答案,很少或没 ...
【经验总结】使用渐进式JPG改善用户体验
[经验总结]使用渐进式JPG改善用户体验[转] [本文系外部转贴,原文地址:http://xmchen.com/progressive-jpg.htm] 今年9月份的时候我在广州应聘了我大学第一份校招 ...

Jpetstore——使用AJAX和jQuery改善用户体验1（账号管理模块）

Jpetstore——使用AJAX和jQuery改善用户体验1（账号管理模块）

Jpetstore——使用AJAX和jQuery改善用户体验1（账号管理模块）相关推荐

最新文章

热门文章