首頁 > web前端 > js教程 > 主體

JavaScript Ajax Json實作上下級下拉框連動

高洛峰
發布: 2016-11-26 16:23:36
原創
1156 人瀏覽過

最近尝试做出一个部门和人员的下拉框联动功能,部门和人员的对应关系是1:N

[html] 

部门
 

   

 

       

   

 

 

人员
 

   

 

     

   

 

 

部門下拉框的onchange()事件走一個AJAX方法,回傳一個JSON物件(JSON裡放的是個LIST)。

js方法在此頁的寫法:​​

[javascript] 

function change(){      ;    

        

    var params = {    

         $.ajax({  

        type: 'get',  

        url: "departmentChange ,  

        data: params,  

        dataType: 'json',  

 2 = $("#workorderOperator");    

         sel2.empty();    

         if(data ==null)  

             {  

             sel2.append("

         var items=data. list;  

         if(items!=null)  

            {  

=        

              {  

               var item=items[i]  "");  

              };  🠎}           else  

             {  

            }  

        },  

        error: function(){  

            });  

    //$.post(url, params, callback);    

}    

[javascript]  

}    

[javascript]  

 

此處回傳的data裡包含list(list見後文),list裡包含著人員的程式碼,人員的姓名兩個屬性。然後先把人員下拉框empty(),透過select控件append方法 新增新的下拉框元素。

後台程式碼:

[java]  

public String departmentChangeEvent() throws Exception{  

     p.        if(userList!=null&&userList.size()> 0)  

        {  

            HttpServletResponse response = ServletActionContext.getResponse(); text/html;charset=utf-8");  

            response.setHeader("Pragma","No-cache" );  

            response.setHeader("Cache-Control","no-cache");  

            PrintWriter writer = response.getWriter() ;  

            JSONObject json = new JSONObject();  

            Map list",userList);  

               JSONObject jso = JSONObject.fromObject(map);  

         );  

         write(jso.toString());  

            writer.flush();  

           writer.close

          

收到www.2cto.com

接著用標準寫法把userList放到一個定義好的HashMap中,KEY為list。

[java] 

JSONObject jso = JSONObject.fromObject(map);  

這是最為關鍵的一步,有的json物件建立方法也可以為JSONObject jso = new JSONObject() ;然後把list裡的記錄放入jso。 。 。

在這裡是行不通的,前台會認為回傳的是字串。 。 。

struts中回傳型別為json

[html]  

  

🜠🠎h 🠎h

         

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板