首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网络技术 > 网络基础 >

paip.jquery ajax 请求JSON数据填充SELECT全过程新绩

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

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)

 

 

 

 

 

 

热点排行