Jquery input異步是指利用Jquery技術實現無需刷新頁面的輸入框內容提交,能夠大大提高用戶交互體驗。在使用Jquery input異步的過程中,我們可以利用ajax的技術來實現異步提交。
$(function() { $("input[type='submit']").click(function() { $.ajax({ type: "POST", url: "submit.php", data: { username: $("#username").val(), password: $("#password").val() }, success: function(data) { $("#show").html(data); } }); }); });
在上述代碼中,我們首先將submit按鈕的點擊事件綁定到一個函數上。在函數中,我們使用ajax進行POST異步提交,并且傳入了兩個參數——username和password。而submit.php是輸入框內容提交的處理文件,此處可以修改為自己的處理文件。最后,如果提交成功,我們則將服務器返回的信息顯示在id為show的元素中。
此外,Jquery input異步還可以進行表單驗證。我們可以選擇一個合適的插件實現表單驗證功能,例如Jquery Validate插件。在使用插件的過程中,我們可以通過對表單的輸入框和驗證規則進行一定配置來實現表單驗證和提交。
$(function() { $("form").validate({ rules: { username: "required", password: "required" }, messages: { username: "請輸入您的用戶名", password: "請輸入您的密碼" }, submitHandler: function(form) { $.ajax({ type: "POST", url: "submit.php", data: $(form).serialize(), success: function(data) { $("#show").html(data); } }); } }); });
在上述代碼中,我們首先使用validate()函數對表單進行規則配置。rules中是對輸入框的驗證規則進行配置,messages中是對驗證規則未通過時的提示信息進行配置。在表單提交時,我們則將表單序列化后通過ajax進行提交,并且,如果提交成功,我們同樣將服務器返回的信息顯示在id為show的元素中。