ajax jQuery+servlet

編寫具體的Ajax代碼，使用jQuery框架將會節省很多的時間，當我們點擊按鈕的時候，將一些信息收集起來，然后通過Ajax傳遞到服務端，然后使用布局修改DOM來實現無刷新的效果。

 

要想實現ajax，先來看一下$.ajax()的一些常用屬性吧：

 

下面通過Ajax實現登錄信息的驗證，先來看一下以"GET"的請求方式：

jQuery代碼：

<script type="text/javascript" src="<%=basePath%>/Js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("[value=GETsubmit]").click(function(){
            $.ajax({
                type: "GET",
                url: "JqAjServlet.do?name="+$("[name=name]").val()+"&pwd="+$("[name=pwd]").val()+"&date="+new Date().getTime(),
                dataType: "text",
                success: function(data){
                    if(data=="true"){
                        $("#show").html("===ok==="+"<br/>"+"name="+$("[name=name]").val()+"<br/>"+"pwd="+$("[name=pwd]").val());
                    }else if(data=="false"){
                        $("#show").html("==信息不符合==");
                    }
                },
                error: function(){
                    $("#show").html("Error XMLHttpRequest");
                }
            });
        });
    });
</script>

第1行代碼是加載一個jQuery庫，這里隨意加載一個現有的jQuery庫即可。

第7行代碼是傳遞數據，數據為發送請求的地址+發送到服務端的數據。這里為什么沒有$.ajax的data屬性呢？那是因為當data屬性的參數不是字符串時，將自動轉換成字符串格式。所以在GET請求中附加在url后，以防止這種自動轉換。

第8行代碼是指定預期服務端返回的數據類型，這里我們將其指定為“text”文本形式（也可指定為xml、json等格式。json的格式將在另一篇文章中講解）。

第9行代碼是請求成功后回調的函數，“function(data)”這里的data是一個變量，是服務端返回的數據，相當於var data = xmlHttp.responseText();

 

jsp代碼：

<form action="">
<table border="0">
    <tr><td>name:</td><td><input type="text" name="name"/></td></tr>
    <tr><td>password:</td><td><input type="password" name="pwd"/></td></tr>
    <tr><td></td><td><input type="button" value="GETsubmit"/></td></tr>
</table>
</form>
<div id="show"></div>

 

servlet代碼：

public class JqAjServlet extends HttpServlet {

    
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        doPost(request, response);
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("application/text; charset=utf-8");
        PrintWriter out = response.getWriter();
        
        String name = request.getParameter("name");
        String pwd = request.getParameter("pwd");
        System.out.println("name="+name+" pwd="+pwd);
        if(name.equals("admin") && pwd.equals("123456")){
            try {
                out.write("true");
            } catch (Exception e) {
                e.printStackTrace();
            }finally{
                out.close();
            }
        }else{
            try {
                out.write("false");
            } catch (Exception e) {
                e.printStackTrace();
            }finally{
                out.close();
            }
        }
    }

}

這里需要注意的是第1行代碼，response.setContentType("application/text; charset=utf-8"); 這里聲明response返回一個text文件。調用response.getWriter().write()方法返回數據。

這樣一個簡單的ajax驗證登錄信息的界面就完成了。

 

當然了，Get方式也是可以提交數據的，不過像一些大型的數據，Get就不夠了。我們就需要一個Post一個Form。

下面就看一下如何以Post方式向服務端提交數據：

 

代碼很簡單，只有2行代碼值得解釋一下：

$("[value=POSTsubmit]").click(function(){
    $.ajax({
        type: "POST",
        url: "JqAjServlet.do",
        dataType: "text",
        data: "name="+$("[name=name1]").val()+"&pwd="+$("[name=pwd1]").val()+"&date="+new Date().getTime(),
        success: function(data){
            if(data=="true"){
                $("#show1").html("===ok==="+"<br/>"+"name="+$("[name=name1]").val()+"<br/>"+"pwd="+$("[name=pwd1]").val());
            }else if(data=="false"){
                $("#show1").html("==信息不符合==");
            }
        },
        error: function(){
            $("#show1").html("Error XMLHttpRequest");
        }
    });
});

第4行代碼，這里的參數只為發送請求的地址。

第6行代碼是連同請求發送到服務端的數據，前面有說當data屬性的參數不為字符串時，將自動轉換成字符串格式；這里，我們就需要用到這個功能（比如：dataType屬性的參數為json時，將在另一篇文章中講解）。

 

好了，這樣，簡單的Ajax應用就完成了。