jQuery是目前一個很流行的js架構，它也提供了對ajax很好的支援。使用ajax非同步請求資料時，如果伺服器返回的一個列表資料，通常的做法是把列表資料轉換成json格式的資料，然後返回到頁面，使用jQuery進行解析並用表格來顯示，這要求你對javascript解析json很熟透。
我在這裡提供一種投機取巧的做法，使用jQuery發送非同步請求給Servlet，Servlet仍然使用JSP渲染結果，最後由JSP返回html給用戶端頁面，用戶端頁面通過jQuery直接把資料顯示在頁面上。這樣就可以在JSP頁面上繼續使用類似JSTL的標籤庫來完成資料的顯示。具體樣本如下：
1. 用戶端發起請求和顯示結果的頁面: index.html
<?xml version="1.0" encoding="UTF-8" ?><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br /><title>ajax直接顯示jsp返回的資料</title><br /><mce:script type="text/javascript" src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js"></mce:script><br /><mce:script type="text/javascript"><!--<br />function doSearch(){<br />//使用ajax發送異常請求到test.do。把返回的 HTML檔案代碼插入ID為data的元素中<br />$("#data").load('test.do?'+Math.random());<br />}<br />// --></mce:script><br /></head><br /><body><br /><div><br /><input type="button" value="查詢資料" onclick="doSearch()"/> <br /><input type="button" value="清除資料" onclick="$('#data').html('')"/><br /></div><br /><div id="data"></div><br /></body><br /></html>
2. 伺服器接收請求並處理資料的Servlet: TestServlet.java
package com.qiujy.web.controller;</p><p>import java.io.IOException;<br />import java.util.ArrayList;<br />import java.util.List;<br />import java.util.Random;</p><p>import javax.servlet.ServletException;<br />import javax.servlet.http.HttpServlet;<br />import javax.servlet.http.HttpServletRequest;<br />import javax.servlet.http.HttpServletResponse;</p><p>public class TestServlet extends HttpServlet {<br />private static final long serialVersionUID = 1L;</p><p>protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {<br />this.doPost(request, response);<br />}</p><p>protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {<br />List<String> list = new ArrayList<String>();</p><p>Random random = new Random();<br />int max = random.nextInt(31);<br />for(int i = 0; i < max; i++){<br />list.add("測試資料"+ i);<br />}<br />request.setAttribute("data", list);<br />request.getRequestDispatcher("/data.jsp").forward(request, response);<br />}<br />}<br />
3. 伺服器顯示資料的JSP：data.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"<br /> pageEncoding="UTF-8"%><br /><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><br /><table border="1" width="300px"><br /><tr><td>序號</td><td>資料</td><td align="center">操作</td></tr><br /><c:forEach items="${data}" var="str" varStatus="vs"><br /><tr><td>${vs.count}</td><td>${str}</td><br /><td align="center"><a href="javascript:void(0)">修改</a> <a href="javascript:void(0)">刪除</a></td></tr><br /></c:forEach><br /></table><br />
樣本比較簡單，就是上面三個主要檔案。如果實在是需要原始碼。留言郵箱或者到這個連結下載 http://download.csdn.net/source/2291129
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
