用戶端代碼:
<script type="text/javascript">
//頁面加載完畢後執行
$(document).ready(function(){
//使用者名輸入框綁定事件
$("#username").focusout(function(){
//得到輸入框的值
var $text = $("#username").val();
//光标離開,ajax發送請求
$.ajax({
url:"/test/myServlet",
type:"post",
data:{"name":$text},
success:function(data){
//data是傳回的值,内部通過parse()方法将json字元串轉換成json對象
var $info = "";
//獲得傳回的值
var $exit = data.exit;
//判斷再顯示
if($exit){
$info="可以使用";
$("#msg").css("color","green");
}else{
$info="該使用者已存在!";
$("#msg").css("color","red");
}
$("#msg").html($info);
},
error:function(data){
alert("請求錯誤");
},
dataType:"json"
});
});
});
</script>
<body>
使用者名:<input type="text" id="username">
<span id="msg"></span>
</body>
服務端代碼(用servlet模拟):
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
//獲得輸入框輸入的值
String name = request.getParameter("name");
boolean b = false;
if(name.equals("123")){
b=true;
}
//以JSON字元串的形式傳回
response.getWriter().write("{\"exit\":"+b+"}");
}
效果圖: