現在很多網站在註冊用戶名時，你只要輸入好要註冊的用戶名後，不用提交請求就可以實時的顯示用戶名是否可用，重複等。這總情況下不能刷新頁面，而要把用戶名提交到後臺比對，後臺把結果返回到前端，前端再顯示出用戶名是否可用。下面將使用JQuery的ajax方法，和JQuery的表單功能來實現我們的需求
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表單驗證更多信息參考：菜鳥教程