Ajax初體驗之登入校驗

2021-07-04 02:59:00 字數 2189 閱讀 3945

ajax的關鍵:xmlhttprequest物件

期望的效果如下:

有這樣乙個表單(類似註冊)

達到較好的使用者體驗。【密碼輸入框有空的讀者自行實踐,這裡不做過多描述】

關鍵**如下【主要用到了servlet+jdbc】:

首先是這個「簡陋」的表單:

然後是js**:

其實這個就是表單ectype的預設值,等同於設定了content-type請求頭,不過這裡我們用的是ajax的方式傳送請求,這裡沒有預設值,需要我們自己指定。

這裡用到了xmlhttprequest物件的onreadystatechange事件,該事件會在xmlhttprequest物件的狀態變化的時候觸發,上網搜一搜xmlhttprequest物件有五種狀態:

0:僅僅建立了xmlhttprequest物件,還未呼叫open()方法,【初始化未完成狀態】

1:open()方法已經呼叫,但是還沒有呼叫send()方法,【請求已經開始】

2:send()方法已經呼叫,【請求傳送完成】

3:開始收到伺服器的響應。

4:伺服器響應完畢。

也就是說onreadystatechange會在,0-->1,1-->2,2-->3,3-->4的時候觸發。

如果我們不做一些處理的話,很顯然onreadystatechange會被觸發四次。所以加了這個判斷:if(xmlhttp.readystate==4&&xmlhttp.status==200),我們還關心伺服器返回的狀態碼是否是200。

然後我們可以猜到:xmlhttp.responsetext是從後台傳遞過來的資料,沒錯就是這樣。

這裡我們是這樣傳遞引數給後台的:xmlhttp.send("username="+username);

後台就可以這樣取到傳遞過來的資料:string username = request.getparameter("username");

bservlet的onpost方法中的**如下【web.xml配置檔案就不說了,都是工具自動完成的,沒有大改】:

response.setcontenttype("text/html");

printwriter out = response.getwriter();

string username = request.getparameter("username");

boolean flag = new dbhelper().searchbyname(username);//判斷使用者是否已經存在

string msg = flag==true?"user already exists!":"";

out.print(msg);

out.print中的msg為後台與ajax互動後最後傳遞過去的資料,與xmlhttp.responsetext;對應。

中間就是封裝的jdbc的操作了。

jdbc**可看可不看,還是貼出來吧。

dbhelper

public class dbhelper  else 

} catch (sqlexception e) finally

return false;

}}

dbutils

public class dbutils  catch (classnotfoundexception e) 	}	

/**獲取資料庫連線物件

* @return

*/public static connection getconnection() catch (sqlexception e)

return conn; }

/**關閉資料庫連線資源

* @param con

* @param ps

* @param rs

*/public static void close(connection con,preparedstatement ps,resultset rs) catch (sqlexception e)

} if(ps!=null) catch (sqlexception e)

} if(con!=null) catch (sqlexception e)

} }}

資料庫中的user表如下:

就加了兩條資料。

效果圖再來一張

AJAX初體驗之上手篇

ajax初體驗之上手篇 ajax是這兩年蠻熱的東西,我也湊湊熱鬧,前些天去找了些教程學學,下面就按整個處理過程把自己學的東西寫寫,不過,因為是初學,所以有錯誤就請見諒啦,歡迎指正 1.建立 xmlhttprequest 物件 現在的瀏覽器有很多種,建立 xmlhttprequest 的方法也不相同,...

python爬蟲模擬登入初體驗

第一次學習爬蟲,自己真是醉醉噠,因為實驗室專案需要,所以迅速學習了一下,這次做的是乙個帶cookie的模擬登入,其中遇到了許許多多的問題,最難的就是要訪問的頁面加入了csrf跨站請求偽造驗證 因為我是渣渣,所以感到很難做 和如何帶cookie來模擬登入,最後在好友某殷的幫助下,順利解決了問題。先貼 ...

scrapy之爬蟲初體驗

本篇文章主要將怎樣建立乙個scrapy專案,以及完成第乙個scrapy爬蟲專案。首先是安裝scrapy模組,有很多原因都能導致scrapy模組安裝失敗,網上有很多教程讓怎樣安裝scrapy。親測比較有效的方法使用whl檔案安裝。不過有小夥伴也可以嘗試直接使用pip install scrapy命令進...