JQuery的Ajax實現註冊檢測使用者名稱
阿新 • • 發佈:2020-08-17
Ajax(無需等待直接向伺服器發起請求)
(Asynchronous
Javascript
And
Xml) :非同步的
Google創新的一種js技術
實現方法一:比較原始沒有封裝的方法:
1 //核對使用者名稱是否可用 2 var xmlhttp = null; 3 4 function checkUser(userName) { 5 if (xmlhttp == null) { 6 xmlhttp = new XMLHttpRequest();//第一步:建立一步通訊物件 7 }8 //第二步:設定回撥函式 9 xmlhttp.onreadystatechange = function () { 10 if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { 11 $("#tip").html(xmlhttp.responseText); 12 } 13 } 14 xmlhttp.open("get", "register?op=check&userName=" + userName);15 xmlhttp.send(); 16 }
從文字框中輸入一個字元後就立即到資料庫中查詢該使用者名稱是否存在,如果存在,提示不可用,直到可用為止;
方法二:JQuery的Ajax:
1 //核對使用者名稱是否可用 2 function checkUser(userName) { 3 $.ajax({ 4 type: 'post',//如果是get可以不寫type,預設是get 5 url: "register",//action方式 6data: {op: 'check', userName: userName}, //引數,如果引數多,可用date後跟一個大括號 7 success: function (res) {//回撥函式 8 if (res.indexOf("yes") !== -1) { 9 $("#tip").html("Yes! Available: user name!");//可用 10 //$("#tj").prop("disabled", false); //設定按鈕可用 11 12 } else { 13 $("#tip").html("No! User name: not available!");//不可用 14 // $("#tj").prop("disabled", true); //設定按鈕不可用 15 } 16 17 } 18 }); 19 }
執行效果和上面一樣;