歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

jQuery Ajax Servlet JSON(Struts2)動態生成table

jsp 頁面代碼:table 用div包裹住$("#div_tb table").remove(); 移除div裡面的table 然後再加入table
 
servlet 與struts2一樣的道理只是配置文件不一樣

========================分割線========================

推薦閱讀

jQuery權威指南 PDF版中文+配套源代碼 http://www.linuxidc.com/Linux/2013-10/91059.htm

jQuery實戰 中文PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90631.htm

《jQuery即學即用(雙色)》 PDF+源代碼 http://www.linuxidc.com/Linux/2013-09/90383.htm

鋒利的jQuery(第2版) 完整版PDF+源碼 http://www.linuxidc.com/Linux/2013-10/91527.htm

jQuery完成帶復選框的表格行高亮顯示 http://www.linuxidc.com/Linux/2013-08/89406.htm

jQuery基礎教程(第4版) PDF 完整高清版+配套源碼 http://www.linuxidc.com/Linux/2014-03/98162.htm

========================分割線========================
 
點擊查看struts2寫的級聯下拉框

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 <%
 String path = request.getContextPath();
 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 %>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
  <head>
    <base href="<%=basePath%>">
   
    <title>列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <script type="text/javascript" src="jquery/jquery-1.9.1.js"></script><!--jquery自己導入-->
 <script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
 <link rel="stylesheet" type="text/css" href="css/itemListStyle.css"><!--CSS 自己設置-->
 <script type="text/javascript">
 function getList(){
 var sel_val =$("#sel_itemGroup").val();
 jQuery.ajax({ 
 url : "getList",   
 data : {key: sel_val},
 type : "post", 
 cache : false, 
 dataType : "json", 
 success:callback   
 });
 }
 function callback(json) {
 if(json.length==0){
 $("#div_tb table").remove();
 var new_table="<table id='listTable'>"+
 "<tr><td id='td4' width='15%'>序號</td>"+
 "<td id='td4' width='25%'>檢測項描述</td>"+
 "<td id='td4' width='20%'>傳感器類型</td>"+
 "<td id='td4' width='20%'>監測項ID</td>"+
 "<td id='td4' width='20%'>操作</td></tr>"+
 "<tr><td colspan='5'><font color='red'>"+
 "該站點沒有傳感器或者加載數據出錯.....</font></td></tr></table>";
 $("#div_tb").append(new_table);
 }else{
 $("#div_tb table").remove();
 var new_table="<table id='listTable'>"+
 "<tr><td id='td4' width='15%'>序號</td>"+
 "<td id='td4' width='25%'>檢測項描述</td>"+
 "<td id='td4' width='20%'>傳感器類型</td>"+
 "<td id='td4' width='20%'>監測項ID</td>"+
 "<td id='td4' width='20%'>操作</td></tr></table>";
 $("#div_tb").append(new_table);
 var tb = $("#listTable");
 var str ;
 for(var i=0;i<json.length;i++){
 if(i%2==0){
 str = "<tr style='background-color:#D8EFFF'><td>" + (i + 1) + "</td><td>" + json[i].itemName
 + "</td><td>" + json[i].model + "</td><td>"
 + json[i].itemKey + "</td><td>"
 + "<a>刪除</a> | <a>編輯</a>" + "</td></tr>";
 }else{
 str = "<tr><td>" + (i + 1) + "</td><td>" + json[i].itemName
 + "</td><td>" + json[i].model + "</td><td>"
 + json[i].itemKey + "</td><td>"
 + "<a>刪除</a> | <a>編輯</a>" + "</td></tr>";
 }
 tb.append(str);
 }
 }
 }
 $(function() {
 $("#sel_itemGroup").change(getList);
 });
 </script>
  </head>
 <body>
 <center>
 <form id="myform" action="AC86RegisterAction" method="post">
 <div>
 <table id="listTable1">
 <tr>
 <td align="left" >
 <select class="selectWidth" id="sel_itemGroup">
 <option value="1">站點1</option>
 <option value="2">站點2</option>
 </select>
 </td>
 </tr>
 </table>
 </div>
 <div id="div_tb" align="center">
 <table id="listTable">
 <tr>
 <td id="td4" width="15%">序號</td>
 <td id="td4" width="25%">檢測項描述</td>
 <td id="td4" width="20%">傳感器類型</td>
 <td id="td4" width="20%">監測項ID</td>
 <td id="td4" width="20%">操作</td>
 </tr>
 
</table>
 </div>
 <br>
 <table id="listTable1">
 <tr>
 <td align="left" >
 <select class="selectWidth">
 <option>item</option>
 </select>
 <input type="button" value="添加監測項" >
 </td>
 </tr>
 
</table>
 
</form>
 </center>
 </body>
 </html>
 

servlet代碼
 
package com.sunwe.ems.servlet;
 

import java.io.IOException;
 import java.io.PrintWriter;
 import java.util.ArrayList;
 import java.util.List;
 

import javax.servlet.ServletException;
 import javax.servlet.http.HttpServlet;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 import net.sf.json.JSONArray;
 public class getList extends HttpServlet {
 
public getList() {
 super();
 }
 

public void doGet(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
 this.doPost(request, response);
 }
 

public void doPost(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
 response.setHeader("Cache-Control", "no-cache");
 response.setContentType("text/json;charset=UTF-8");
 response.setCharacterEncoding("utf-8");
 String key =request.getParameter("key");
 PrintWriter out = response.getWriter();
 System.out.println("itemGroupKey "+key);
 Item it =new Item();//該對象自己設置
 it.setItemKey(8002);
 it.setItemGroupKey(1);
 it.setItemName("aaa");
 it.setModel("dsdsdss");
 List<Item> list =new ArrayList<Item>();
 list.add(it);
 list.add(it);
 list.add(it);
 list.add(it);
 list.add(it);
 list.add(it);
 list.add(it);
 
JSONArray json = JSONArray.fromObject(list);
 System.out.println(json);
 out.print(json);
 out.flush();
 out.close();
 }
 
}

生成的json格式[{"id":0,"itemGroupKey":1,"itemKey":8002,"itemName":"aaaa","model":"dsdsdss"},{"id":0,"itemGroupKey":1,"itemKey":8002,"itemName":"aaaa","model":"dsdsdss"},{"id":0,"itemGroupKey":1,"itemKey":8002,"itemName":"aaaa","model":"dsdsdss"},{"id":0,"itemGroupKey":1,"itemKey":8002,"itemName":"aaaa","model":"dsdsdss"},{"id":0,"itemGroupKey":1,"itemKey":8002,"itemName":"aaaa","model":"dsdsdss"},{"id":0,"itemGroupKey":1,"itemKey":8002,"itemName":"aaaa","model":"dsdsdss"},{"id":0,"itemGroupKey":1,"itemKey":8002,"itemName":"aaaa","model":"dsdsdss"}]
 

xml配置
 
<?xml version="1.0" encoding="UTF-8"?>
 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
 
  <servlet>
    <description>AJAX</description>
    <display-name>AJAX</display-name>
    <servlet-name>getList</servlet-name>
    <servlet-class>com.sunwe.ems.servlet.getList</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>getList</servlet-name>
    <url-pattern>/getList</url-pattern>
  </servlet-mapping>
 </web-app>
 

json需要的包
 
  1.commons-lang.jar
 
      2.commons-beanutils.jar
 
      3.commons-collections.jar
 
      4.commons-logging.jar
 
      5.ezmorph.jar
 
      6.json-lib-2.2.2-jdk15.jar
 

json包下載

免費下載地址在 http://linux.linuxidc.com/

用戶名與密碼都是www.linuxidc.com

具體下載目錄在 /2014年資料/4月/28日/jQuery Ajax Servlet JSON(Struts2)動態生成table

下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm

jQuery 的詳細介紹:請點這裡
jQuery 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved