jsp+ajax實現無刷新

時間 2019-11-30

標籤 jsp+ajax jsp ajax 實現刷新欄目 JSP 简体版

原文原文鏈接

jsp+ajax實現無刷新，鼠標離開文本框即驗證用戶名

jsp+ajax實現無刷新，鼠標離開文本框即驗證用戶名（本功能多用於註冊） input.jsp(表單提交頁面)： %@ page contentType=text/html; charset=GBK % html style type=text/css !-- @import url(../aqgc/style_c.css); --
jsp+ajax實現無刷新，鼠標離開文本框即驗證用戶名（本功能多用於註冊）

input.jsp(表單提交頁面)：

<%@ page contentType="text/html; charset=GBK" %>
<html>
<style type="text/css">

</style>
<head>
<title>Ajax實例</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">

</style>
</head>
<body bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0" marginheight="0" marginwidth="0">
<center>
<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>
<td height="200" valign="top" >
<table width="100%" height="270" 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>
    </td>
</form>
</BODY>
</html>

check,jsp (驗證頁面)：

<%--
/*************************************************************************
*    Title: check.jsp                                                 *
*    @CreateDate 2010/09/01: 檢查用戶註冊信息合法性                                    *
*    @Author : 竹林居者      2010/09/01    created                       *
*                                                                        *
**************************************************************************/
--%>
<%@ page contentType="text/html; charset=GB2312" %>
<%@ page import="java.io.*" %>
<%@ page import="java.sql.*" %>
<%@ page import="javax.sql.DataSource"%>
<%@ page import="javax.naming.InitialContext"%>
<%@ page import="java.util.Properties"%>
<%@ page import="java.util.Hashtable"%>

<jsp:useBean id="db" scope="page" class="s2jsp.bysj.dao.BaseDao"></jsp:useBean>
<%
String action="";
String groupname="";
//檢查用戶名

//用做數據庫聯接，能夠根據你的狀況修改，若是爲測試能夠不用*做記號的語句
Connection conn        = null;
PreparedStatement pstmt = null;
ResultSet rs           = null;

try
{

   action=request.getParameter("action");
   groupname=request.getParameter("groupName").trim();
if("".equals(groupname))
{
   System.out.println("null");
   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
{

conn = db.getConn();
String strsql="select userName from USERS where userName='"+groupname+"'";
pstmt = conn.prepareStatement(strsql);

   rs = pstmt.executeQuery();
    if(rs.next())
    {
     out.println("<div class='reds' align='left'>"+"用戶名"+groupname+"已被佔用，請從新輸入！</div>");
    }
    else
    {
   out.println("您的用戶名可用");
    }
}

}
catch (Exception e){
System.out.println(request.getServletPath()+" error : " + e.getMessage());
}
finally {
db.closeAll(conn,pstmt,rs);
}
%>javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。