Ajax使用原生态JS验证用户名是否存在
2019/6/27 22:09:27
本文主要是介绍Ajax使用原生态JS验证用户名是否存在,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
直接上代码:
reg_ajax.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax请求servlet实现用户名是否存在验证</title> </head> <body> <script type="text/javascript"> /** * 得到XMLHttpRequest对象 */ function getajaxHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的浏览器不支持AJAX!"); return false; } } } return xmlHttp; } /** * 发送ajax请求 * url--请求到服务器的URL * methodtype(post/get) * con (true(异步)|false(同步)) * functionName(回调方法名,不需要引号,这里只有成功的时候才调用) * (注意:这方法有二个参数,一个就是xmlhttp,一个就是要处理的对象) */ function ajaxrequest(url, methodtype, con, functionName) { //获取XMLHTTPRequest对象 var xmlhttp = getajaxHttp(); //设置回调函数(响应的时候调用的函数) xmlhttp.onreadystatechange = function() { //这个函数中的代码在什么时候被XMLHTTPRequest对象调用? //当服务器响应时,XMLHTTPRequest对象会自动调用该回调方法 if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { functionName(xmlhttp.responseText); } } }; //创建请求 xmlhttp.open(methodtype, url, con); //发送请求 xmlhttp.send(); } function checkUsername() { var username=document.getElementById('username').value; //调用ajax请求Servlet ajaxrequest("userServlet?username="+username,"POST",true,ckUsernameResponse); } function ckUsernameResponse(responseContents){ if (responseContents=='yes') { document.getElementById('usernameMsg').innerHTML="<font color='red'>用户名存在</font>"; document.getElementById('username').style="background-color: red"; }else{ document.getElementById('usernameMsg').innerHTML=""; document.getElementById('username').style="background-color: white"; } } </script> <table> <tr> <td>用户名</td> <td><input type="text" id="username" onblur="checkUsername()"/></td> <td><div id="usernameMsg"></div></td> </tr> <tr> <td>邮箱</td> <td><input type="text" id="email" /></td> <td><div id="emailMsg"></div></td> </tr> </table> </body> </html>
请求的Servlet代码如下,UserServlet.java
package cn.bestchance.servlet; import java.io.IOException; import java.util.ArrayList; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class UserServlet */ @WebServlet("/userServlet") public class UserServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username=request.getParameter("username"); //这里使用ArrayList代替从数据库中查询数据 ArrayList<String> userList =new ArrayList<String>(); userList.add("admin"); userList.add("test"); userList.add("chance"); //验证用户名是否存在 boolean flag = false; for (String string : userList) { if(string.equals(username)){ flag = true; break; } } if(flag){//用户名已存在 response.getWriter().print("yes"); }else{//用户名不存在 response.getWriter().print("no"); } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持找一找教程网。
这篇关于Ajax使用原生态JS验证用户名是否存在的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01Vue.js 是什么-icode9专业技术文章分享
- 2024-11-01Vue3入门教程:从零开始搭建第一个Vue3项目
- 2024-11-01详解vueRouter4基础教程
- 2024-11-01Vuex4课程:初学者的完整入门指南
- 2024-10-31Vue3课程:新手入门到初级掌握
- 2024-10-31Vue3课程:新手入门到初级应用详解
- 2024-10-31VueRouter4课程:新手入门与实战指南
- 2024-10-31Vuex4学习:从入门到初级实战教程
- 2024-10-31Vue3教程:新手入门与基础实战
- 2024-10-31Vue教程:新手快速入门指南