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)