本文使用JQuery實現PUT/GET例子。

啟動一個Servlet例項

到目前為止，也只是啟動了一個index.jsp，需要還沒有啟動一個servlet。要啟動一個servlet，需要在HelloWeb中新建一個類JsonAjaxServlet，並將其設定到Server的web.xml中，這樣就可以訪問這個Servlet例項了。以下是詳細過程。

1. 新建JsonAjaxServlet類(程式碼見附1)
   
   新增後的目錄結構：
   
2. 新增到Server的web.xml中
   
   新增如下程式碼：

<servlet>
    <servlet-name>jsonAjaxAction</servlet-name
 
>
    <servlet-class>com.njupt.zhb.test.JsonAjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>jsonAjaxAction</servlet-name>
    <url-pattern>/jsonAjaxAction</url-pattern>
</servlet-mapping>

JQuery實現PUT GET

1. 匯入JQuery
   這裡使用的是1.4.3.min.js，位於

   https://code.jquery.com/jquery-1.4.3.min.js
   將其保存於HelloWeb/WebContent/js目錄下，目錄結構如下：
   

2. 更新index.jsp程式碼
   將index.jsp程式碼改成如下，該程式碼是在介面上添加了一個輸入框和一個按鈕。

index.jsp

<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<%@ page language="java" import="java.util.*"%>
<script type
 
="text/javascript">
    function query(name) {
        $.ajax({
            type : "POST",
            url : "jsonAjaxAction?userName=" + name + "&content=Sheldon",
            timeout : 30000,
            dataType : "json",
            success : function(data) {
                alert("name: " + data.yourName);
            },
        });
    }
</script>
<table>
    <tr>
        <td><label>UserName:</label></td>
        <td><input type="text" id="nameinput" name="name" /></td>
        <td><input type="button" value="query" onClick="query(nameinput.value)" /></td>
    </tr>
</table>

執行結果如下：

附1：JsonAjaxServlet.java內容

/* 
 * $filename: JsonAjaxServlet.java,v $ 
 * $Date: Sep 1, 2013  $ 
 * Copyright (C) ZhengHaibo, Inc. All rights reserved. 
 * This software is Made by Zhenghaibo. 
 */  
package com.njupt.zhb.test;  

import java.io.IOException;  
import java.io.PrintWriter;  
import java.net.URLDecoder;  

import javax.servlet.ServletException;  
import javax.servlet.http.HttpServlet;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  

/* 
 *@author: ZhengHaibo   
 *web:     http://blog.csdn.net/nuptboyzhb 
 *mail:    [email protected] 
 *Sep 1, 2013  Nanjing,njupt,China 
 */  
public class JsonAjaxServlet extends HttpServlet{  

    /** 
     *  
     */  
    private static final long serialVersionUID = 1L;  

    @Override  
    protected void doGet(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
        // TODO Auto-generated method stub  
        doPost(request, response);  
    }  

    @Override  
    protected void doPost(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
        // TODO Auto-generated method stub  
        request.setCharacterEncoding("utf-8");  

        String userName = request.getParameter("userName");  
        userName=URLDecoder.decode(userName, "UTF-8");  

        String content = request.getParameter("content");  
        content=URLDecoder.decode(content, "UTF-8");  

        System.out.println("userName:"+userName);  
        System.out.println("content:"+content);  

        response.setCharacterEncoding("utf-8");  
        PrintWriter out = response.getWriter();  
        //將資料拼接成JSON格式  
        out.print("{\"yourName\":\"" + userName + "\",\"yourContent\":\""+content+"\"}");  
        out.flush();  
        out.close();  
    }  
}