paip.jquery ajax 请求JSON数据填充SELECT全过程纪录
paip.jquery ajax 请求JSON数据填充SELECT全过程纪录
----作者Attilax ， 1466519819@qq.com---
1.敲定触发事件
----------------
<html:select property="ID" onchange="changex(this.value)">
<html:options collection="lessonList" property="ID" labelProperty="name"/>
</html:select>
2.开始AJAX
-----------------------
<script language="javascript" src="<%=m.path.appPath(request) %>/taoteapkg/jquery-1.7.2.min.js"></script>
<script >
function changex(val)
{
var url="<%= m.path.appPath(request) %>/taoteapkg/ajax.jsp";
jQuery.get(url, { method: "", lessonid: val },
function(data){
bindx(data);
});
}
3.建立服务端响应JSON
------------------------
--jsp
<%
TaoTiDAO taoTiDAO = new TaoTiDAO();
String s= taoTiDAO.queryTaoTiByLessonid4ajax( request.getParameter("lessonid") );
%>
<%=s%>
--import
json-lib-2.1.jar
D:\099\exampro\build\web\WEB-INF\lib\ezmorph-1.0.3.jar
D:\099\exampro\build\web\WEB-INF\lib\commons-lang-2.6.jar
D:\099\exampro\build\web\WEB-INF\lib\commons-collections.jar
---source
public String queryTaoTiByLessonid4ajax(String lessonid)
{
List li=queryTaoTi(Integer.parseInt(lessonid));
JSONArray jsonArray = JSONArray.fromObject( li );
// System.out.println( jsonArray );
return jsonArray.toString();
}
4.解析返回的JSON并绑定到SELECT控件
---------------------------------
function bindx(data)
{
$("#slttt").empty();
var objs = eval('(' + data + ')');
for (var o in objs) {
var jsonObj = objs[o];
var optionstring = "<option value=\"" + jsonObj.ID + "\" >" + jsonObj.name + "</option>";
$("#slttt").append(optionstring); //为Select追加一个Option(下拉项)
}
5.初使化绑定，上方SELECT第一个选项的从中得出的列表值，绑定在下边的SELECT
--------------------------------------
<script>
var checkValue= $("select[name='ID']").val();
changex(checkValue);
</script>
6.主要难点
---------------
在于遍历JSON LIST
还有JQUERY选取SELECT时，没有ID，通过NAME去选择的。
7.参考
-----------------
jquery ajax json 通过后台代码(查询数据库)绑定html控件select 下拉框_凯子的空间_百度空间
jQuery的Select操作集合 - OPEN 开发经验库.htm - 快捷方式 (2)
