直接通過一個案例來說明一下Ajax和JQuery的基本用法吧，用戶註冊時，判斷當前用戶名是否可用，通過彈窗的形式來通知用戶，如果用戶起的名字爲skh則不允許註冊，否則可以，就不加數據庫來測試了，太麻煩.....
Servlet：
package cn.skh.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class AjaxServlet
*/
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AjaxServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String test = request.getParameter("test");
PrintWriter out = response.getWriter();
if("skh".equals(test) ) {
out.print("false");
}else {
out.print("true");
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
前端JSP：
tips：需要注意的就是$.ajax的格式，以及所需要的參數。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="scripts/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//給賬號文本框綁定失去焦點的事件
$("#test").blur(function(){
var test=$("#test").val();
var msg1={
"test":test,
};
$.ajax({
url:"AjaxServlet",//設置服務器地址，即爲servlet配置的url-pattern
type:"post",//提交的方式
data:msg1,//提交到服務器的數據，多個值以逗號分割開
datatype:"text",
success:function(msg){//回調函數，msg是返回的數據
if(msg=="false")
{
alert("flase");
}
else{
alert("true");
}
}
});
});
});
</script>
</head>
<body>
用戶名：<input id="test" type="text" maxlength="20">
<br>
密碼：<input type="text">
</body>
</html>
結果是沒問題的，感興趣的可以自己去驗證一下，這裏就不在貼圖了。。。。