jquery直接显示jsp返回的数据

最新推荐文章于 2022-11-26 11:59:54 发布

qjyong

最新推荐文章于 2022-11-26 11:59:54 发布

阅读量1.7w

点赞数

分类专栏： JavaScript 文章标签： jquery jsp javascript servlet random ajax

本文链接：https://blog.youkuaiyun.com/qjyong/article/details/5534071

版权

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

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" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ajax直接显示jsp返回的数据</title> <mce:script type="text/javascript" src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <div> <input type="button" value="查询数据" οnclick="doSearch()"/> <input type="button" value="清除数据" οnclick="$('#data').html('')"/> </div> <div id="data"></div> </body> </html>

2. 服务器接收请求并处理数据的Servlet: TestServlet.java

package com.qiujy.web.controller; import java.io.IOException; import java.util.ArrayList; import java.util.List; import java.util.Random; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class TestServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { List<String> list = new ArrayList<String>(); Random random = new Random(); int max = random.nextInt(31); for(int i = 0; i < max; i++){ list.add("测试数据"+ i); } request.setAttribute("data", list); request.getRequestDispatcher("/data.jsp").forward(request, response); } }

3. 服务器显示数据的JSP：data.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <table border="1" width="300px"> <tr><td>序号</td><td>数据</td><td align="center">操作</td></tr> <c:forEach items="${data}" var="str" varStatus="vs"> <tr><td>${vs.count}</td><td>${str}</td> <td align="center"><a href="javascript:void(0)">修改</a> <a href="javascript:void(0)">删除</a></td></tr> </c:forEach> </table>

示例比较简单，就是上面三个主要文件。如果实在是需要源代码。留言邮箱或者到这个链接下载 http://download.youkuaiyun.com/source/2291129