Ajax校驗用戶名是否存在的方法
本文實例為大家分享了Ajax驗證用戶名是否存在的實例代碼,代碼簡單易懂,非常不錯,需要的朋友可以參考下
jsp頁面
我引入了bootstrap和jQuery
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label"
style="color: #fff">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="studentName"
name="studentName" placeholder="請輸入姓名">
<span id="s_studentName"></span>
</div>
</div>
register.jsp頁面
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
//頁面加載完成之后
function fun() {
//給用戶名綁定blur事件
$("#studentName").blur(function() {
//獲取studentName文本框的值
var studentName = $("#studentName").val();
//發(fā)送ajax請求
//期望服務(wù)器響應(yīng)回的數(shù)據(jù)格式{"userExsit":true,"msg":"此用戶名太受歡迎,請更換一個"}
// {"userExsit":false,"msg":"此用戶名已存在"}
$.get("CheckNameServlet", {
"studentName" : studentName
}, function(data) {
//判斷userExsit鍵的值是否為true
var span = $("#s_studentName");
if (data.isExist) {
//用戶不存在
span.css("color", "red");
span.html(data.msg);
} else {
//用戶存在,可以給提示,也可以不給
span.html("");
}
},"json");
});
};
fun();
</script>
后臺student文件下的CheckNameServlet頁面
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//設(shè)置編碼格式
response.setContentType("text/html;charset=UTF-8");
//獲取前端頁面的值
String name = request.getParameter("studentName");
// 期望服務(wù)器響應(yīng)回的數(shù)據(jù)格式{"isExsit":true,"msg":"此用戶名太受歡迎,請更換一個"}
// {"userExsit":false,"msg":"此用戶名已存在"}
// 檢驗是否存在該用戶名
try {
boolean isExist = StudentService.isExist(name);
System.out.println("isExist" + isExist);
Map<String, Object> map = new HashMap<>();
// 通知頁面,到底有沒有
if (isExist) {
map.put("isExist", true);
map.put("msg", "此用戶名太受歡迎,請更換一個");
} else {
map.put("isExist", false);
// map.put("msg", "用戶名可用");
}
//將map轉(zhuǎn)換為json之前,要導包哦~
// 將map轉(zhuǎn)為json,并傳遞給客戶端
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(response.getWriter(), map);
} catch (SQLException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
}
JDBCDemo的方法的實現(xiàn)(我沒實現(xiàn)接口,直接寫的)
public static boolean checkName(String name) throws SQLException {
boolean flag = false;
String sql = "select * from student_table where student_name=?";
PreparedStatement statement = connection.prepareStatement(sql);
statement.setString(1, name);
ResultSet set = statement.executeQuery();
如果存在我輸入的用戶名和數(shù)據(jù)庫表中已有的用戶名相同時
if(set.next()) {
flag = true;
}
return flag;
}
}
總結(jié):
以上所述是小編給大家介紹的Ajax驗證用戶名是否存在的實例代碼,希望對大家有所幫助。
相關(guān)文章
使用ajax技術(shù)無刷新動態(tài)調(diào)用股票信息
新浪的財金頻道一直感覺做得很好。但由于最近網(wǎng)速慢的緣故,查看股票信息時網(wǎng)頁老是打不開。這幾天一直在研究ajax,于是用jquery自己做了一個自動讀取新浪股票實時數(shù)據(jù)的頁面。2008-11-11
通過Ajax手動解決WordPress WP-PostViews不計數(shù)的問題
這篇文章主要介紹了通過Ajax手動解決WordPress WP-PostViews不計數(shù)的問題的相關(guān)資料,需要的朋友可以參考下2016-01-01
使用Ajax實時檢測"用戶名、郵箱等"是否已經(jīng)存在
這篇文章主要介紹了使用Ajax實時檢測"用戶名、郵箱等"是否已經(jīng)存在,需要的朋友可以參考下2015-01-01
AJAX在不同瀏覽器中XMLHttpRequest對象的生成示例
本文為大家介紹下AJAX在不同瀏覽器中XMLHttpRequest對象是怎樣生成的,以方便我們針對不同瀏覽器進行測試,感興趣的朋友可以參考下,希望對大家有所幫助2013-07-07
基于Ajax技術(shù)實現(xiàn)考試倒計時并自動提交試卷
這篇文章主要介紹了基于Ajax技術(shù)實現(xiàn)考試倒計時并自動提交試卷 的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06
javascript請求servlet實現(xiàn)ajax示例(分享)
下面小編就為大家?guī)硪黄猨avascript請求servlet實現(xiàn)ajax示例(分享)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06

