使用jquery和java基于下拉列表填充html表数据

             $(document).ready(function() { $('#batchID').change(function(event) { var batch=$('#batchID').val(); $.ajax({ url : "doShowAllocationStatus.action", data : "batch="+batch, success : function(html) { $('#table').html(html); }, error : function(html) { alert("error"); } }); }); });   
         
 
 
TAN
 
Curator
 
Curator Status
 
QC
 
QC Status
 
 
 
 
 
 
 
 
 
  
  
   

在这个当我使用下拉列表中的所有内容选择工作正常，因为我期望的下拉列表和表但它反应不同我的意思是当我提交时，如果我在批量下拉列表中选择一些东西，表再次附加相同的行列表然后表来到它正确的列表。 如果我只用于表格，它会再次打印整页。 我能理解发生了什么。 但无法找到解决方案来实现我的需求。

我的目标是根据选择的批次显示表格，提交应该做它实际要做的事情。

服务器端代码……

 package controller; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import java.util.Map; import model.BatchInfo; import model.CationDAO; //import org.apache.struts2.interceptor.SessionAware; import com.opensymphony.xwork2.ActionContext; import com.opensymphony.xwork2.ActionSupport; @SuppressWarnings("serial") public class AllocateTAN extends ActionSupport { //Fields that hold data... private List allocationList =new ArrayList(); private String batch; private List batchs = new ArrayList(); private String TAN; private String Tans[]; private String user; private List users = new ArrayList(); private String user_work_as; //getters and setters.... public List getAllocationList() { return allocationList; } public void setAllocationList(List allocationList) { this.allocationList = allocationList; } //@RequiredStringValidator(message = "Batch Not Selected") public String getBatch() { return batch; } public void setBatch(String batch) { this.batch = batch; } public List getBatchs() { return batchs; } public void setBatchs(List batchs) { this.batchs = batchs; } //@RequiredStringValidator(message = "TAN Not Selected") public String getTAN() { return TAN; } public void setTAN(String tAN) { TAN = tAN; } public String[] getTans() { return Tans; } public void setTans(String[] tans) { Tans = tans; } //@RequiredStringValidator(message = "Worker Not Selected") public String getUser() { return user; } public void setUser(String user) { this.user = user; } public List getUsers() { return users; } public void setUsers(List users) { this.users = users; } //@RequiredStringValidator(message = "Select Any One") public String getUser_work_as() { return user_work_as; } public void setUser_work_as(String user_work_as) { this.user_work_as = user_work_as; } //variable used to access DataBase... CationDAO dao1 = new CationDAO() ; //flow 1.: making all details available for the allocate TAN page...when page page is loaded 1st time public String AllocatingTANpageDetails() throws SQLException{ Mapsession=ActionContext.getContext().getSession(); this.batchs=dao1.Batch_List(); session.put("Batchs", batchs); //Tans=dao1.Tan_list(getBatch()); this.users=dao1.Users_List(); session.put("users", users); return SUCCESS; } /*TAN list private void showTANlist(String Batch1) throws SQLException{ Mapsession=ActionContext.getContext().getSession(); Tans=dao1.Tan_list(Batch1); session.put("Tans", Tans); }*/ //flow 2.: showing Allocation Status in Table form...in same page public String showAllocationStatus() throws SQLException { System.out.println("Inside Show Allocation Status"); if(batch==null||"-1".equals(batch)){ addActionMessage("Please!... Select a Batch"); return ERROR; } Mapsession=ActionContext.getContext().getSession(); //setBatch(batch_value); String bth=getBatch(); if (bth==null || bth=="-1"){ System.out.println("batch is empty "+bth); } System.out.println(bth); session.put("Batch",bth); // showTANlist(bth); System.out.println("Processing Allocation List... "); this.allocationList=(List)dao1.status(bth); System.out.println(allocationList); session.put("AllocationList",allocationList); System.out.println("Finished..."); return SUCCESS; } //execute method form allocating a TAN for a user... public String execute(){ String statusTable=null; String er = null; if(Tans==null||"-1".equals(Tans)){ addActionError("Please!... Select a TAN"); er="er"; } if (user==null||"-1".equals(user)){ addActionError("Please!... Select an Worker");er="er"; } if (user_work_as==null||user_work_as==""||"-1".equals(user_work_as)){ addActionError("Please!... Select either Curation or QC");er="er"; } try { statusTable=showAllocationStatus(); } catch (SQLException e) { e.printStackTrace(); } if(!"er".equals(er)&& "success".equals(statusTable)){ System.out.println("inside Execute metho of AllocateTAN.java"); if ("QC".equalsIgnoreCase(user_work_as)){ try { if(!"Complete".equalsIgnoreCase(dao1.CheckCurator(batch,Tans))){ addActionMessage("Curation Not yet completed"); return ERROR; } dao1.AllocateTANforUser( batch, Tans, user, user_work_as); this.allocationList=(List)dao1.status(getBatch()); return SUCCESS; } catch (SQLException e) { e.printStackTrace(); } }else if("Curator".equalsIgnoreCase(user_work_as)){ try { dao1.AllocateTANforUser( batch, Tans, user, user_work_as); } catch (SQLException e) { e.printStackTrace(); } this.allocationList=(List)dao1.status(getBatch()); return SUCCESS; } } return ERROR; } } 

Answer 1

首先，我建议你改变你的结构，因为你几乎没有使用AJAX（你只使用一个加载，就是它，这与从一开始就从动作传递所有这些值没有什么不同）。 因为你只有3个值可以传递，所以用jQuery("#myid").val()捕获它们相当容易，并用jQuery.ajax传递它们。 就像是

然后

 function allocationg_you(){ var val1 = jQuery("#value1").val(); var val2 = jQuery("#value2").val(); var val3 = jQuery("#value3").val(); jQuery.ajax({ url: "allocator", data: "val1=" + val1 +"&val2=" + val2 + "&val3=" + val3 + "&r=" //dont forget to add a random number success: function(data){ jQuery("#mytable").html(data).load(); } }); } 

最后，你应该将ajax茶点减少到必要的最小值，因为它更容易保持和美观。 所以例如你的模板应该像这样划分

使用此模板，您只需刷新实际内容，其他所有内容将保持不变（真正的AJAX），因此在您的AJAX调用响应中，应该只有迭代器部分。 您甚至可以使用滚动条和静态标头创建表，只需要在ajax单元格中放置一些匹配的大小以及表标记。

希望这对你有所帮助。 如果你设法破解这个，你就能创造奇迹。 jQuery + Struts2 +（似乎你没有使用Hbernate，但是很好）这是一个可怕的组合。