现在很多网站在注册用户名时,你只要输入好要注册的用户名后,不用提交请求就可以实时的显示用户名是否可用,重复等。这总情况下不能刷新页面,而要把用户名提交到后台比对,后台把结果返回到前端,前端再显示出用户名是否可用。下面将使用JQuery的ajax方法,和JQuery的表单功能来实现我们的需求
JQuery ajax方法
此方法可以提交任何地方的数据到后台,实现代码如下
$(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"); return false; }else if (arg === "OK") { $("#id_error_info").addClass("error_info"); }else{ console.log("OK"); } }, fail: function () { } }) }else { $("#id_error_info").addClass("error_info"); } }) });
JQuery 表单验证
此方法可提交form表单内指定的数据到后台,此外表单功能对ajax做了一些封装,使其使用更简单,更方便,推荐使用