這次給大家帶來ajax用$.post方式進行用戶名校驗，ajax用$.post方式進行用戶名校驗的注意事項有哪些，下面就是實戰案例，一起來看一下。

第一種：傳統的ajax異步請求，后臺代碼以及效果在最下邊

首先我們在eclipse中創建一個注冊頁面regist.jsp,創建一個form表單，注意，由于我們只是實現用戶名校驗的效果，下邊紅色部門是我們需要研究對象，所以其他的部門可以忽略不看。

內容如下：

pageEncoding="UTF-8"%>

用戶注冊

//第三步：ajax異步請求用戶名是否存在

function checkUsername(){

// 獲得文本框值:

var username = document.getElementById("username").value;

// 1.創建異步交互對象

var xhr = createXmlHttp();//第二步中已經創建xmlHttpRequest,這里直接調用函數就可以了。

// 2.設置監聽

xhr.onreadystatechange = function(){

if(xhr.readyState == 4){

if(xhr.status == 200){

//把返回的數據放入到span中

document.getElementById("span").innerHTML = xhr.responseText;//responseText是后臺返回的數據

}

}

}

// 3.打開連接

xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username="+username,true);

// 4.發送

xhr.send(null);

}

//第二部：創建xmlHttp對象

function createXmlHttp(){

var xmlHttpRequest;

try{ // Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e){

try{// Internet Explorer

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e){

try{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

catch (e){}

}

}

return xmlHttpRequest;

}

function change(){

var img1 = document.getElementById("checkImg");

img1.src="${pageContext.request.contextPath}/checkImg.action?"+new Date().getTime();

}

會員注冊

小米商城

//第一步：首先，我們創建一個用戶名input輸入框，并添加一個οnblur="checkUsername()"事件

用 戶 名:

密 碼:

確認 密碼:

郵 箱 號:

姓 名:

手 機 號:

地 址:

驗 證 碼:

第二種方式：使用jQuery中的ajax實現以上效果。首先form表單以及Action中的都不變，我們只需改變script就可以了。

第一步：引入js文件

第二步：//ajax異步請求用戶名是否存在

$(function(){

$('#username').change(function(){//給username添加一個change事件

var val = $(this).val();//獲取輸入框的值

val = $.trim(val);//去空

if(val != ""){//判斷值是否為空

var url = "${pageContext.request.contextPath}/user_findByName.action";//url還是那個URL

var args ={"time":new Date().getTime(),"username":val};//這里和上面不同的是，這里用json方式實現傳入的time和username參數

$.post(url,args,function(data){//發送post請求，后臺返回的數據在data里面，

$('#span').html(data);//把后臺返回的數據放入span中

});

}

});

})

然后我們來看一下后臺數據上會怎么返回的。由于我這是使用ssh框架實現的，為了方便，所以我只展示在Action中是怎么返回數據的，關于ssh框架中service層，dao層的實現請自行解決。public class UserAction extends ActionSupport implements ModelDriven {

private static final long serialVersionUID = 1L;

/**

* 模型驅動

*/

private User user = new User();

@Override

public User getModel() {

return user;

}

// 注入UserService

private UserService userService;

public void setUserService(UserService userService) {

this.userService = userService;

}/**

* AJAX進行異步校驗用戶名的執行方法

*

* @throws IOException

*/

public String findByName() throws IOException {

User existUser = userService.findByName(user.getUsername());//調用service層的方法返回數據庫中查詢出來的對象

// 獲得response對象,向頁面輸出:

HttpServletResponse response = ServletActionContext.getResponse();

response.setContentType("text/html;charset=UTF-8");//設置編碼格式

// 判斷返回的對象是否為空

if (existUser != null) {

// 如果有，查詢到該用戶:用戶名已經存在

response.getWriter().println("用戶名已經存在");

} else {

// 如果沒有，用戶名可以使用

response.getWriter().println("用戶名可以使用");

}

return NONE;//此處返回空

}

效果如下：

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

總結

以上是生活随笔為你收集整理的用ajax进行部门的验证,ajax用$.post方式进行用户名校验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。