實時驗證用戶名是否重復
JQuery ajax方法
此方法可以提交任何地方的數據到後臺，實現代碼如下
在這之前需要加載JQuery的js
$(function () {
var old_data = $("#id_ServerName").val();
$("#id_ServerName").change(function () {
var data = $("#id_ServerName").val();
if (data !== old_data){
$.ajax({
url: "/am/check",
type: "post",
data: {"host_name": data},
success: function (arg) {
if (arg === "Error"){
$("#id_error_info").removeClass("error_info");
}else if (arg === "OK") {
$("#id_error_info").addClass("error_info");
}else{
console.log("OK");
}
},
fail: function () {
}
})
}else {
$("#id_error_info").addClass("error_info");
}
})
});實現思路：
首先是創建一個自運行函數
然後定義一個old_data，獲取初始值，根據業務不同，這裏不一定大家都需要，如果是註冊，判斷用戶名是否存在就不需要，但如果是修改用戶名，就需要，因為修改用戶名的時候，首先需要獲取到當前用戶名
然後再通過JQuery獲取id為id_ServerName的標簽(通常為input標簽)，並監聽一個change事件（當value發生更改時）執行一個函數
獲取新的值（這個值是需要傳入後臺進行比對的數據）
判斷新值是否等於老的值，如果等於就不進行任何操作，我這裏是添加了一個類，這個類是用於將錯誤信息隱藏。如果不等於，就需要執行ajax將數據傳入後臺，然後後臺進行比對
ajax指定了需要傳入的url（這裏分為本域請求和跨域請求，我這裏是本域請求，如果是跨域自行百度解決）。指定數據傳輸類型為post，也可以指定為get。指定了傳入的數據，數據為一個字典，key為自定義，value為獲取到的新數據，後端接收到就為字典。seccess，定義了一個函數，這個函數用來處理請求成功後端返回的數據，這個數據用了一個參數去接收，參數名自定義，我這裏為arg。Error,OK為後端處理好數據後返回的結果，前端根據返回結果做處理。fail也定義了一個函數，這個函數用來處理請求失敗時的處理函數，比如超時或者其它
JQuery 表單驗證
此方法可提交form表單內指定的數據到後臺，此外表單功能對ajax做了一些封裝，使其使用更簡單，更方便，推薦使用，代碼如下
首先需要加載JQuery表單驗證的模塊
<script src="/static/jquery.js"></script> <script src="/static/jquery.validate.min.js"></script> <script src="/static/messages_zh.js"></scrip
下面是JQuery代碼塊
$().ready(function() {
$("#commentForm").validate({
rules: {
EnvName: {
required: true,
remote: {
url: "/am/check",
type: "post"
}
}
},
messages: {
EnvName: {
required: "請輸入環境名稱",
remote: "此名稱已經被使用"
}
}
});
});實現思路：
同樣也是創建了一個自執行函數，調用了ready方法，此方法又調用了一個函數，至於為什麽是ready方法，自行查找相關資料
找到form表單，這裏通過id找到，然後監聽一個validata事件
rules用來定義規則，EnvName為標簽的name屬性，通過為input標簽，也就是需要驗證的標簽，如果有多個標簽需要驗證，那麽就在對應的花括號後面加個逗號，然後換行寫另外一個規則
required: true表示此標簽為必填
remote表示調用ajax（重點），此方法url表示數據要上傳的url，同樣也存在本域請求或者跨域請求，type指定數據類型，data，指定要傳輸的數據，默認為本標簽的value，也是以字典形式，其中key為標簽的name，value為標簽的value，另外這裏只接收false返回值和true返回值，區別大小寫，這裏為小寫，所以後端處理完數據後必須返回指定的字符串，否則無法處理
messages指定當規則裏面判斷出錯需要提示的消息，比如這裏EnvName標簽裏面，如果此標簽沒有寫任何內容就會出現後面指定的提示，如果是遠程調用返回false則出現後面指定的提示
關於JQuery表單驗證更多信息參考：菜鳥教程
實時驗證用戶名是否重復