如何使用ajax请求bootstrap下拉框的内容
1、在页面新增一个方法getDepts（）
function getDepts() {
$.ajax({
url:"${APP_PATH}/depts",
type:"get",
success:function(result) {
console.log(result);
}
});
}
2、创建一个业务逻辑层DepartmentService
package com.gwolf.crud.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.gwolf.crud.bean.Department;
import com.gwolf.crud.dao.DepartmentMapper;
@Service
public class DepartmentService {
@Autowired
private DepartmentMapper departmentMapper;
public List<Department> getDepts() {
return this.departmentMapper.selectByExample(null);
}
}
3、新建一个DepartmentController控制类，用于部门信息的查询。
package com.gwolf.crud.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ResponseBody;
import com.gwolf.crud.bean.Department;
import com.gwolf.crud.bean.Msg;
import com.gwolf.crud.service.DepartmentService;
@Controller
public class DepartmentController {
@Autowired
private DepartmentService departmentService;
@ResponseBody
@RequestMapping("/depts")
public Msg getDepts() {
List<Department> list = this.departmentService.getDepts();
return Msg.success().add("depts", list);
}
}
4、在浏览器控制台查看是否数据已经返回
5、显示部门部门信息在bootstrap模态对话框的下拉列表之中
function getDepts() {
$.ajax({
url:"${APP_PATH}/depts",
type:"get",
success:function(result) {
$.each(result.extend.depts,function() {
var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
optionEle.appendTo($("#dept_select"));
});
}
});
}
6、在浏览器中查看模态对话框的下拉列表数据是否成功。
