ajax實現註冊頁面動態驗證使用者名稱是否已註冊，不必提交即可驗證。
阿新 • • 發佈：2019-01-01
今天學了一下ajax，感覺很爽啊。ajax真是很強大、
我首先就把我之前一直沒解決的問題：如何在前臺動態驗證使用者名稱是否已註冊，而不必提交重新整理之後再驗證，上程式碼：
首先，jsp頁面：
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> <input type="text" name="text1" id="text1id" onblur="Ajaxtest1();"><br> <input type="text" name="text2" id="text2id" /><br> <%-- <input type="button" value="button" onclick="Ajaxtest1();"><br>--%> <div id="div1"></div> </body> </html>
這個其實只是兩個文字框，輸入用、
下面是js程式碼。驗證用的、
這個沒什麼可說的，唯一注意的一點就是xmlhttprequest.open("GET", "testajax1?t1="+text1+"&t2="+text2, true);<script type="text/javascript"> var xmlhttprequest=null; function Ajaxtest1(){ if(window.ActiveXObject){//IE瀏覽器 xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest){ xmlhttprequest=new XMLHttpRequest(); } if(null!=xmlhttprequest){ var text1=document.getElementById("text1id").value; var text2=document.getElementById("text2id").value; xmlhttprequest.open("GET", "testajax1?t1="+text1+"&t2="+text2, true); xmlhttprequest.onreadystatechange=ajaxcallback; //var tt=document.getElementById("text1").innerHTML; xmlhttprequest.send(null); } } function ajaxcallback(){ if(xmlhttprequest.readyState==4){ if(xmlhttprequest.status==200){ var text=xmlhttprequest.responseText; document.getElementById("div1").innerHTML=text; } } } </script>
這裡面的testajax1是servlet，注意這個地址需和web.xml保持一致。
接下來是testajax1.java
package com.guang.ajax; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.guang.sqlhelp.sqlhelp; import java.sql.*; public class testajax1 extends HttpServlet { public testajax1() { super(); } int i=0; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("gbk"); response.setContentType("text/html;charset=gbk"); PrintWriter out = response.getWriter(); //System.out.println("doGet"+i); i++; String t1=request.getParameter("t1"); //System.out.println(t1); //out.println("Hello World"); sqlhelp sp=new sqlhelp(); Connection conn=sp.getconn(); Statement sta=sp.getsta2(conn); String sql="select * from baseinfo where usernum='"+t1+"'"; ResultSet set=sp.getset(sta, sql); int j=0; if(set!=null){ try { set.last(); } catch (SQLException e) { e.printStackTrace(); } try { j=set.getRow(); } catch (SQLException e) { e.printStackTrace(); } if(j==1){ out.println("此學號已被註冊，請換一個！！"); } else{ out.println("恭喜您，這個可以註冊！"); } out.close(); } } }
那個。上面的也很簡單，就是一個取資料的過程，唯一的一個就是驗證行數。這個也可以其他的方法。
sqlhelp在這裡我就不貼出來了。