paip.jquery ajax 请求JSON数据填充SELECT全过程纪录

paip.jquery ajax 请求JSON数据填充SELECT全过程纪录

----作者Attilax ， 1466519819@qq.com---

1.敲定触发事件
----------------
      <html:select property="ID"  οnchange="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)