jQuery Ajax Servlet JSON(Struts2)动态生成table

jsp 页面代码:table 用div包裹住$("#div_tb table").remove(); 移除div里面的table 然后再加入table
 
servlet 与struts2一样的道理只是配置文件不一样

========================分割线========================

推荐阅读

jQuery权威指南 PDF版中文+配套源代码

jQuery实战 中文PDF+源码

《jQuery即学即用(双色)》 PDF+源代码

锋利的jQuery(第2版) 完整版PDF+源码

jQuery完成带复选框的表格行高亮显示

jQuery基础教程(第4版) PDF 完整高清版+配套源码

========================分割线========================
 
点击查看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="https://www.linuxidc.com/<%=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="https://www.linuxidc.com/jquery/jquery-1.9.1.js"></script><!--jquery自己导入-->
 <script type="text/javascript" src="https://www.linuxidc.com/jquery/jquery-1.9.1.min.js"></script>
 <link type="text/css" href="https://www.linuxidc.com/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>"+
 "<tr><td>序号</td>"+
 "<td>检测项描述</td>"+
 "<td>传感器类型</td>"+
 "<td>监测项ID</td>"+
 "<td>操作</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>"+
 "<tr><td>序号</td>"+
 "<td>检测项描述</td>"+
 "<td>传感器类型</td>"+
 "<td>监测项ID</td>"+
 "<td>操作</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><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 action="AC86RegisterAction" method="post">
 <div>
 <table>
 <tr>
 <td >
 <select>
 <option value="1">站点1</option>
 <option value="2">站点2</option>
 </select>
 </td>
 </tr>
 </table>
 </div>
 <div>
 <table>
 <tr>
 <td>序号</td>
 <td>检测项描述</td>
 <td>传感器类型</td>
 <td>监测项ID</td>
 <td>操作</td>
 </tr>
 
</table>
 </div>
 <br>
 <table>
 <tr>
 <td >
 <select>
 <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;
 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/23d931df8994da3c7643768da56c046a.html