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

淡淡的烟草味﹌ 2021-11-09 10:22 271阅读 0赞

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

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

--------------------

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

--------------------

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

**核心源代码：**  
jsp：

js：

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改善用户体验][_AJAX_jQuery]

--------------------

[MVC_JSP_Servlet_JPetStore_AJAX_jQuery]: https://download.csdn.net/download/qq_39564555/11465162
[20190802210731185.png]: /images/20211109/25dc2e4887bb47ca90cf06013ed416df.png
[20190802210739965.png]: /images/20211109/d65a7f31ca874da2b6c613c90ea854a1.png
[_AJAX_jQuery]: https://github.com/zz2summer/JavaWeb-Application-Developing-Technology/tree/master/%E5%AE%9E%E9%AA%8C%E7%9B%B8%E5%85%B3/%E5%AE%9E%E9%AA%8C%E4%BA%8C%20%20%E4%BD%BF%E7%94%A8AJAX%E5%92%8CjQuery%E6%94%B9%E5%96%84%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C