ssm 开发经验 web 项目 使用ajax请求填充 下拉列表

1. 下拉列表使用的是bookstrap的下拉列表， 然后自动填充的是部门信息（显示的是部门名称，提交的信息的部门id）
2. 页面上有个按钮，点击这个按钮会弹出填充员工信息的对话框，然后这个对话框中有部门信息，在点击弹出对话框按钮的时候会发起一个ajax请求，后端部分代码，service 和dao就不写了，就是简单的获得所有部门信息，封装成tablDept对象列表

   package ssm.controller;
   
   import org.springframework.beans.factory.annotation.Autowired;
   import org.springframework.stereotype.Controller;
   import org.springframework.web.bind.annotation.RequestMapping;
   import org.springframework.web.bind.annotation.ResponseBody;
   import ssm.bean.Msg;
   import ssm.bean.TblDept;
   import ssm.service.DepartmentServices;
   
   import java.util.List;
   
   /**
    * 处理和部门信息相关的请求
    */
   @Controller
   public class DepartmentController {
   
   
       @Autowired
       private DepartmentServices departmentServices;
   
   
       @RequestMapping("/depts")
       @ResponseBody
       public Msg getDepts(){
           List<TblDept> deptList =  departmentServices.getDepts();
           return Msg.success().add("depts", deptList);
       }
   
   }
   

    

3. 页面中的下拉列表

     <div class="form-group">
                               <label  class="col-sm-2 control-label">dId</label>
                               <div class="col-sm-4">
                                   <select  id="selectDept" class="form-control" name="dId">
   
                                   </select>
                               </div>
                           </div>

    

4. ajax 信息， 发送获取到的json字符串长酱紫

   {"code":200,"msg":"success","extend":{"depts":[{"deptId":1,"deptName":"开发部"}]}}

    

5. 使用c:foreach进行遍历，填充

     function getDepts(){
                   $.ajax({
                       url:"${APP_PATH}/depts",
                       type : "GET",
                       success:function(result){
                           // {"code":200,"msg":"success","extend":{"depts":[{"deptId":1,"deptName":"开发部"}]}}
                          // $("#emp_add_model select").append("")
                           $.each(result.extend.depts, function(){
                               var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                               optionEle.appendTo("#selectDept");
                           })
                       }
                   });
               }