使用struts2完成jQuery进行ajax级联.
上网找了下资料,参考着做了个
JSP页面,使用JSTL的标签。
[html] view plaincopy
01. <tr>
02. <td width=”10%”>所属栏目</td>
03. <td width=”90%”><select name=”columnInfo” id=”columnInfo”>
04. <option value=”0″>–请选择–</option>
05. <c:forEach var=”columns” items=”${columnsList}”>
06. <option value=”${columns.id}”>${columns.name}</option>
07. </c:forEach>
08. </select><select name=”subColumnInfo” id=”subColumnInfo”></select></td>
09. </tr>
JS
[javascript] view plaincopy
01. $(function(){
02. $(“#columnInfo”).change(function(){
03. $.getJSON(“NewsAction!ajax”,{parColumnId:$(this).val()},function(myJSON){
04. var myOptions=”";
05. for(var i=0;i<myJSON.length;i++){
06. myOptions += ‘<option value=”‘ + myJSON[i].optionValue + ‘”>’ +
07. myJSON[i].optionDisplay + ‘</option>’;
08. }
09. $(“#subColumnInfo”).empty();
10. $(“#subColumnInfo”).html(myOptions);
11. });
12. });
13. $(“#columnInfo”).change();
14. })
后台处理
[java] view plaincopy
01. // 处理AJAX级联请求
02. public void ajax() throws Exception {
03. String JSON_text = “”;
04. if (parColumnId == 0) {
05. JSON_text = “[{optionValue:'0',optionDisplay:'--请选择--'}]“;
06. } else {
07. List<Columns> subColumnList = columnService
08. .findColumns(parColumnId);
09. 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. }