JWorld@TW the best professional Java site in Taiwan
      註冊 | 登入 | 全文檢索 | 排行榜  

» JWorld@TW » Servlet/JSP 討論區  

按列印兼容模式列印這個話題 列印話題    把這個話題寄給朋友 寄給朋友   
reply to postflat modego to previous topicgo to next topic
本主題所含的標籤
作者 Re:不跳轉傳js值給JSP [Re:chuanchu]
chuanchu





發文: 120
積分: 0
於 2013-12-21 14:33 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
chuanchu wrote:
JSP是運行在伺服端,而JavaScript是運行在客戶端(瀏覽器)
JSP動態產生的html頁面放在HTTP回應主體中由HTTP伺服器回應客戶端
這就是你看到的頁面

使用請求參數協助JSP產生你要的頁面,因為它知道如何取得資料(可能在後端),再利用這些資料做一些你想做的事。然後由瀏覽器呈現給你。

可利用JavaScript發出非同步請求取得回應,更新html網頁的部份內容。

所以不覺得該用html網頁中的表格資料,經你篩選後再傳給JSP去處理。
如果只是要從回應的網頁中篩選表格資料呈現,直接用JavaScript處理圖表就好,不用再浪費網路資源。


將上述文字以一個實例表現

佈署目錄結構
/WEB-INF/Chart.jsp
/WEB-INF/classes/demo/GraphServlet.class
/WEB-INF/classes/demo/ContextListener.class

/WEB-INF/lib/jstl.jar
/WEB-INF/lib/standard.jar
/WEB-INF/lib/jcommon-1.0.21.jar
/WEB-INF/lib/jfreechart-1.0.17.jar

web.xml設定
1
2
3
4
5
6
7
8
9
10
11
12
//用以調用jfreechart的DisplayChart呈現圖
<?xml version="1.0" encoding="UTF-8"?>
<web-app ...>//此元素不完整
<servlet>
    <servlet-name>DisplayChart</servlet-name>
    <servlet-class>org.jfree.chart.servlet.DisplayChart</servlet-class>
 </servlet>
 <servlet-mapping>
     <servlet-name>DisplayChart</servlet-name>
     <url-pattern>/servlet/DisplayChart</url-pattern>
 </servlet-mapping>
</web-app>


在瀏覽器URL欄位請求http://localhost:8080/[your application context]/chart.show

Data.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//存取資料用
package demo;
 
public class Data {
    private String name;
    private double caseValue;
    private double controlValue;
    
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public double getCaseValue() {
        return caseValue;
    }
    public void setCaseValue(double caseValue) {
        this.caseValue = caseValue;
    }
    public double getControlValue() {
        return controlValue;
    }
    public void setControlValue(double controlValue) {
        this.controlValue = controlValue;
    }   
}


ContextListener.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//設定Context屬性
package demo;
 
import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.servlet.annotation.WebListener;
 
@WebListener
public class ContextListener implements ServletContextListener {
    public void contextInitialized(ServletContextEvent sce) {
        Data data_AA0 = new Data();
        data_AA0.setName("AA");
        data_AA0.setCaseValue(10);
        data_AA0.setControlValue(20);
        
        Data data_Aa0 = new Data();
        data_Aa0.setName("Aa");
        data_Aa0.setCaseValue(30);
        data_Aa0.setControlValue(40);
        
        Data data_aa0 = new Data();
        data_aa0.setName("aa");
        data_aa0.setCaseValue(50);
        data_aa0.setControlValue(60);
        
        Data data_AA1 = new Data();
        data_AA1.setName("AA");
        data_AA1.setCaseValue(55);
        data_AA1.setControlValue(65);
        
        Data data_Aa1 = new Data();
        data_Aa1.setName("Aa");
        data_Aa1.setCaseValue(35);
        data_Aa1.setControlValue(45);
        
        Data data_aa1 = new Data();
        data_aa1.setName("aa");
        data_aa1.setCaseValue(15);
        data_aa1.setControlValue(25);
        
        Data[] snp0 = new Data[]{data_AA0, data_Aa0, data_aa0};
        Data[] snp1 = new Data[]{data_AA1, data_Aa1, data_aa1};
        
        ServletContext context = sce.getServletContext();
        context.setAttribute("SNP0" , snp0);
        context.setAttribute("SNP1" , snp1);
    }
 
    public void contextDestroyed(ServletContextEvent sce) {}
}


GraphServlet.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//取得請求參數,繪製Bar Chart,轉發視圖回應。無請求參數則使用預設。
package demo;
 
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import org.jfree.data.general.DatasetUtilities;
import org.jfree.data.category.CategoryDataset;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.chart.*;
import org.jfree.chart.servlet.ServletUtilities;
 
@WebServlet({ "/chart.show" })
public class GraphServlet extends HttpServlet {
    
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      String tableID = request.getParameter("tableID");
      if(tableID == null){
          tableID = "SNP0";
      }
      Data[] array = (Data[])(getServletContext().getAttribute(tableID.trim()));
      if(array != null){
          String[] rowKeys = {"Case","Control"};
          String[] columnKeys = {array[0].getName(), array[1].getName(), array[2].getName()};
          double[][] data = new double[][]{{array[0].getCaseValue(), array[1].getCaseValue(), array[2].getCaseValue()},
              {array[0].getControlValue(), array[1].getControlValue(), array[2].getControlValue()}};
          CategoryDataset dataset = DatasetUtilities.createCategoryDataset(rowKeys, columnKeys, data);
          JFreeChart chart = ChartFactory.createBarChart(tableID, "", "number", dataset, PlotOrientation.VERTICAL, true, true, false);
          String filename = ServletUtilities.saveChartAsJPEG(chart, 600, 450, request.getSession());
          String graphURL = request.getContextPath() + "/servlet/DisplayChart?filename=" + filename;
          request.setAttribute("graphURL", graphURL);
          request.getRequestDispatcher("/WEB-INF/Chart.jsp").forward(request, response);
      }
      else{
          response.sendError(404);
      }
  }
  
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      doGet(request, response);
  }
 
}


Chart.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<%--視圖呈現。有預設圖表及button。--%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Chart</title>
</head>
<body>
    <script type="text/javascript">
    function async(arg){
      var XHR;
      if(window.XMLHttpRequest){
        XHR = new XMLHttpRequest();
      }
      else{
        XHR = new ActiveXObject("Microsoft.XMLHTTP");
      }
      XHR.open("POST", "chart.show", true);
      XHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      XHR.send("tableID="+escape(arg));
      XHR.onreadystatechange = function(){
          if(XHR.readyState== 4 && XHR.status==200){
              document.getElementById("myDiv").innerHTML = XHR.responseText;
          }
      };
    }
    </script>
    
    <table bgcolor="pink" style="text-align:center; width:900px; height:450px;" border=1>
    <caption>${param.tableID != null ? param.tableID : "SNP0"}</caption>
    <tr><th width="100"></th><th width="100">Case</th><th width="100">Control</th><th rowspan="4"><img src="${graphURL}" width="600" height="450"></th></tr>
    <c:forEach var="data" items="${param.tableID != null ? applicationScope[param.tableID] : SNP0}">
        <tr><td height="100">${data.name}</td><td height="100">${data.caseValue}</td><td height="100">${data.controlValue}</td></tr>
    </c:forEach>
    </table>
    <c:if test="${!sessionScope.isSecond}">
        <hr>
        <c:forEach var="name" items="${pageContext.servletContext.attributeNames}">
            <c:if test="${fn:startsWith(name, 'SNP')}">
                <input type="button" value="${name}" onclick="async('${name}')">
            </c:if>
        </c:forEach>
        <c:set var="isSecond" value="true" scope="session"/>
    </c:if>
    <div id="myDiv"></div>
</body>
</html>


結果如下:



reply to postreply to post
話題樹型展開
人氣 標題 作者 字數 發文時間
8789 不跳轉傳js值給JSP as0955344054 581 2013-12-05 21:48
8517 Re:不跳轉傳js值給JSP roytsang 14 2013-12-05 23:16
8526 Re:不跳轉傳js值給JSP as0955344054 1137 2013-12-06 10:03
8474 Re:不跳轉傳js值給JSP noneman 75 2013-12-06 10:23
8448 Re:不跳轉傳js值給JSP roytsang 126 2013-12-06 10:59
8417 Re:不跳轉傳js值給JSP as0955344054 191 2013-12-06 14:49
8437 Re:不跳轉傳js值給JSP as0955344054 99 2013-12-06 14:52
8409 Re:不跳轉傳js值給JSP roytsang 1579 2013-12-06 15:48
8426 Re:不跳轉傳js值給JSP as0955344054 215 2013-12-06 17:18
8384 Re:不跳轉傳js值給JSP roytsang 1502 2013-12-06 17:55
8399 Re:不跳轉傳js值給JSP as0955344054 1829 2013-12-07 05:24
8334 Re:不跳轉傳js值給JSP roytsang 1892 2013-12-07 11:35
8373 Re:不跳轉傳js值給JSP as0955344054 116 2013-12-07 14:41
8288 Re:不跳轉傳js值給JSP roytsang 815 2013-12-09 11:19
8256 Re:不跳轉傳js值給JSP as0955344054 806 2013-12-10 10:37
8237 Re:不跳轉傳js值給JSP noneman 240 2013-12-10 11:22
8194 Re:不跳轉傳js值給JSP as0955344054 367 2013-12-10 15:33
8232 Re:不跳轉傳js值給JSP chuanchu 149 2013-12-10 13:40
8210 Re:不跳轉傳js值給JSP as0955344054 376 2013-12-10 15:43
8218 Re:不跳轉傳js值給JSP roytsang 1436 2013-12-10 16:11
8301 Re:不跳轉傳js值給JSP chuanchu 277 2013-12-09 12:55
8401 Re:不跳轉傳js值給JSP noneman 124 2013-12-06 17:40
8372 Re:不跳轉傳js值給JSP as0955344054 116 2013-12-08 10:10
8192 Re:不跳轉傳js值給JSP as0955344054 668 2013-12-10 16:07
8175 Re:不跳轉傳js值給JSP chuanchu 289 2013-12-10 20:20
8144 Re:不跳轉傳js值給JSP as0955344054 346 2013-12-10 20:50
8159 Re:不跳轉傳js值給JSP chuanchu 265 2013-12-10 21:19
8168 Re:不跳轉傳js值給JSP as0955344054 170 2013-12-11 00:17
8118 Re:不跳轉傳js值給JSP chris691020 106 2013-12-12 09:08
8117 Re:不跳轉傳js值給JSP chuanchu 7875 2013-12-21 14:33
» JWorld@TW »  Servlet/JSP 討論區

reply to postflat modego to previous topicgo to next topic
  已讀文章
  新的文章
  被刪除的文章
Jump to the top of page

JWorld@TW 本站商標資訊

Powered by Powerful JuteForum® Version Jute 1.5.8