使用struts2完成jQuery进行ajax级联



使用struts2完成jQuery进行ajax级联。上网找了下资料，参考着做了个

 

JSP页面，使用JSTL的标签。

 

  1. <tr>
  2. <td width=”10%”>所属栏目</td>
  3. <td width=”90%”><select name=”columnInfo” id=”columnInfo”>
  4. <option value=”0″>–请选择–</option>
  5. <c:forEach var=”columns” items=”${columnsList}”>
  6. <option value=”${columns.id}”>${columns.name}</option>
  7. </c:forEach>
  8. </select><select name=”subColumnInfo” id=”subColumnInfo”></select></td>
  9. </tr>

 


JS

 

[javascript] view plaincopy

  1. $(function(){
  2. $(“#columnInfo”).change(function(){
  3. $.getJSON(“NewsAction!ajax”,{parColumnId:$(this).val()},function(myJSON){
  4. var myOptions=”";
  5. for(var i=0;i<myJSON.length;i++){
  6. myOptions += ‘<option value=”‘ + myJSON[i].optionValue + ‘”>’ +
  7. myJSON[i].optionDisplay + ‘</option>’;
  8. }
  9. $(“#subColumnInfo”).empty();
  10. $(“#subColumnInfo”).html(myOptions);
  11. });
  12. });
  13. $(“#columnInfo”).change();
  14. })

 

后台处理

 

  1. // 处理AJAX级联请求
  2. public void ajax() throws Exception {
  3. String JSON_text = “”;
  4. if (parColumnId == 0) {
  5. JSON_text = “[{optionValue:'0',optionDisplay:'--请选择--'}]“;
  6. } else {
  7. List<Columns> subColumnList = columnService
  8. .findColumns(parColumnId);
  9. if (subColumnList.size() > 0) {
  10. JSON_text = “[";
  11. for (int i = 0; i < subColumnList.size(); i++) {
  12. Columns sub = subColumnList.get(i);
  13. JSON_text += "{optionValue:'" + sub.getId()
  14. + "',optionDisplay:'" + sub.getName() + "'}";
  15. if (i < subColumnList.size() - 1) {
  16. JSON_text += ", ";
  17. } else if (i == subColumnList.size() - 1) {
  18. JSON_text += "]“;
  19. }
  20. }
  21. }
  22. }
  23. PrintWriter out = null;
  24. try {
  25. ServletActionContext.getResponse().setCharacterEncoding(“UTF-8″);
  26. out = ServletActionContext.getResponse().getWriter();
  27. } catch (IOException ex) {
  28. ex.printStackTrace();
  29. }
  30. out.write(JSON_text);
  31. out.close();
  32. }