使用 JSP + Ajax，我们可以实现“无需刷新”这种功能
发布时间：2023-07-15 14:27:45 所属栏目：教程 来源：
导读：jsp+ajax实现无刷新,鼠标离开文本框即验证用户名，操作如下：新建一个输入页面，起名为input.jsp,
复制代码 代码如下:
<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<title
复制代码 代码如下:
<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<title
|
jsp+ajax实现无刷新,鼠标离开文本框即验证用户名，操作如下：新建一个输入页面，起名为input.jsp, 复制代码 代码如下: <%@ page contentType="text/html; charset=utf-8"%> <html> <head> <title>jsp+ajax实现无刷新_鼠标离开文本框即验证用户名</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> .style1 { color: #FF3333; font-weight: bold; } .style14 { font-size: 13px } .text12black { font-size: 12px; } </style> </head> <body bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0" marginheight="0" marginwidth="0"> <table width="748" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="5"></td> </tr> </table> <script language="javascript"> //创建XMLHttpRequest对象 function GetO() { var ajax=false; try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { ajax = false; } } if (!ajax && typeof XMLHttpRequest!='undefined') { ajax = new XMLHttpRequest(); } return ajax; } function getMyHTML(serverPage, objID) { var ajax = GetO(); //得到了一个html元素，在下面给这个元素的属性赋值 var obj = document.all[objID]; //设置请求方法及目标，并且设置为异步提交 ajax.open("post", serverPage, true); ajax.onreadystatechange = function() { if (ajax.readyState == 4 && ajax.status == 200) { //innerHTML是HTML元素的属性，如果您不理解属性那就理解为HTML元素的变量 //ajax.responseText是服务器的返回值，把值赋给id=passport1的元素的属性 //innerHTML这个属性或说这个变量表示一组开始标记和结束标记之间的内容 obj.innerHTML = ajax.responseText; } } //发送请求 ajax.send(null); } function CheckName() { getMyHTML("check.jsp?groupName="+name_form.group_name.value, "passport1"); } //这个函数的作用是当用户的焦点从其他地方回到group_name这个输入框时再给属性赋回原内容 function sl(tx) { if(tx=='passport1') { document.all[tx].innerHTML = "<div class='reds' align='left'>4-20 个字符 (包括大小写字母,中文,数字,特殊字符等) 1个汉字等于2个字符，建议使用中文。注册后不可修改。</div>"; } } </script> <form name="name_form" method=post> <table width="60%" height="80" align="center" border="1" bordercolor="#96D6E8" class="text12black"> <tr> <td width="22%" height="20" align="right"> 用户名： </td> <td width="61%" align="left"> <INPUT name="group_name" type="text" value="" size=30 maxlength="50" onBlur="javaScript:CheckName();" onFocus="return sl('passport1');" /> <br /> <div id="passport1" style="color: red"></div> </td> <td id="passport2" valign="top"> <div class="explain_blue" align='left'> <span class="gray">4-20 个字符 (包括大小写字母,中文,数字,特殊字符等) 1个汉字等于2个字符，建议使用中文昵称。注册后不可修改。</span> </div> </td> </tr> </table> </form> </body> </html> 在新建一个校验页面，起名为check.jsp,代码如下： 复制代码 代码如下:www.CuoXIn.com <%@ page contentType="text/html; charset=utf-8"%> <% String action = ""; String groupname = ""; //检查用户名 //用作数据库联接，可以根据你的情况修改，如果为测试可以不用*作记号的语句 try { action = request.getParameter("action"); groupname = request.getParameter("groupName").trim(); if ("".equals(groupname)) { out.println("<div class='reds' align='left'>用户名不能为空！</div>"); } else if (groupname.length() < 4 || groupname.length() > 20) { out.println("<div class='reds' align='left'>用户名" + groupname + "不合法！(长度为4到20位，且不能使用?#=等特殊字符)</div>"); } else if ("zhangsan".equals(groupname)) { out.println("<div class='reds' align='left'>" + "用户名" + groupname + "已被占用，请重新输入！</div>"); } else { out.println("您的用户名可用"); } } catch (Exception e) { System.out.println(request.getServletPath() + " error : " + e.getMessage()); } %> （编辑：聊城站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
