用ajax返回到页面一个List,并循环生成下拉列表项

下面是几种转换成json格式的方法:

1 例如:

  List --> json:

List<Student> list = new ArrayList<Student>(); 
for (int i = 0; i < stus.length; i++) { 
list.add(i);
} 
JSONArray jsonArray = JSONArray.fromObject(stus);
System.out.println(jsonArray); 

 2 例如:

 

对象(Student)-->json:

 

Student student = new Student();
student.setAge(18);
student.setName("zhangsan");
JSONObject jsonObject = JSONObject.fromObject(student);
System.out.println(jsonObject); 

  3 综合

 List<Student> -->json

 

Student[] stus = new Student[5]; 
List<Student> stuList = new ArrayList<Student>(); 
for (int i = 0; i < stus.length; i++) { 
stus[i] = new Student();
stus[i].setAge(20); 
stus[i].setName("张三" + i);
stuList.add(stus[i]);
}
JSONObject jsonObjectFromMap = JSONObject.fromObject(stuList);
System.out.println(jsonObjectFromMap);  

 


举例:从数据库中查询出一组数据,用ajax传到页面上,并解析生成下拉列表项

 

 

Action中:

// 获得传过来的机构ID
String org_id = request.getParameter("org_id");

Connection con = ConnectionFactory.getInstance().getConnection();
Statement pst = null;
ResultSet rs = null;
String sql = "";
  
sql = " select c.group_ID,c.group_name from groupinfo c where c.group_ID!='"
+ org_id
+ "' start with c.group_ID='"
+ org_id
+ "' Connect by prior c.group_ID = c.parent_ID";

  
pst = con.createStatement();
rs = pst.executeQuery(sql);
JSONArray arr = new JSONArray();
// 遍历
while (rs.next()) {
JSONObject json = new JSONObject();
json.put("GroupId", rs.getString("group_ID"));
json.put("GroupName", rs.getString("group_name"));
arr.add(json);
}
PrintWriter out = response.getWriter();
out.print(arr.toString());
return null;

 

页面中的获取传过来的list,并进行遍历,生成下拉列表项

js中:

 function change(obj){
var selectValue=document.getElementById('org_id').options[document.getElementById('org_id').selectedIndex].text;
document.getElementById("selectValue").value=selectValue;
//window.location = "<%//=request.getContextPath() %>//statisticsAction.do?cmd=toMmsStaticsByGroup&groupId="+document.getElementById('org_id').value;
var url ='<%=request.getContextPath()%>/statisticsAction.do';
var pars = 'cmd=getGroupByOrg&org_id='+document.getElementById('org_id').value;
var myAjax = new Ajax.Request(url,{method:'post',parameters:pars,onComplete:_complete});
}
//请求完成的处理
function _complete(originalRequest)
{
var statusValue = originalRequest.status;
var arr = originalRequest.responseText;
if(statusValue==200)
{
var group=document.getElementById("columnInfoId");
group.length=0;
group.options.add(new Option("--全部--", "ALL"));
var jsonss=eval("("+arr+")");
for(var i=0;i<jsonss.length;i++){
group.options.add(new Option(jsonss[i].GroupName, jsonss[i].GroupId));
}
}
else if(statusValue==404)
{
alert("代码出现错误,链接地址有误");
}
else
{
alert("代码出现未知错误");

}
}

页面布局中: 

<TABLE width="95%" align=center cellpadding="0" cellspacing="0">
<TBODY>

<TR>
<TD class="zi_3F6293" align="left" height="35" width="50"> 机&nbsp;&nbsp;&nbsp;&nbsp;构:</TD>
<td>
<SELECT style="width:150px" name="groupId" id = "org_id" value="${param.org_id}" onChange="change(this.options[this.options.selectedIndex].value)">
    <c:forEach items="${organizations}" var="org">
<c:if test="${groupId == org['GroupId']}">
<OPTION value="${org['GroupId']}" selected="selected">${org['GroupName']}</OPTION>
</c:if>
<c:if test="${groupId != org['GroupId']}">
<OPTION value="${org['GroupId']}" >${org['GroupName']}</OPTION>
</c:if>
</c:forEach>
</SELECT>
</TD>
</TR>
<TR>
<TD class=zi_3F6293 align="left" height="35" width="50">群&nbsp;&nbsp;&nbsp;&nbsp;组:</TD>
<td>

<SELECT style="width:150Px" name="columnInfoId" id="columnInfoId" >
<OPTION value="ALL">---全部---</OPTION>

</SELECT>
</TD>
</TR>


<tr>

</table>

 

 参考:http://www.cnblogs.com/chenji/archive/2010/09/25/1834580.html

你可能感兴趣的:(html,json)