前提:后台已经写好数据获取方法;
拿我的后台 获取员工信息举例:
package com.icss.hr.dept.controller;
/**
* 查询部门列表
*/
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import com.icss.hr.dept.pojo.Dept;
import com.icss.hr.dept.service.DeptService;
@WebServlet("/QueryDeptServlet")
public class QueryDeptServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置编码
response.setContentType("text/html;charset=utf-8");
//获得输出流
PrintWriter out = response.getWriter();
DeptService service = new DeptService();
try {
//调用业务层获得数据集合
ArrayList<Dept> list = service.queryDept();
//json转换
Gson gson = new Gson();
String jsonStr = gson.toJson(list);
out.print(jsonStr);
} catch (SQLException e) {
e.printStackTrace();
//手动跳转到错误页
request.getRequestDispatcher("/500.jsp").forward(request , response);
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
改方法最后以字符串形式输出了全部的员工信息:
[{“deptId”:10,“deptName”:“开发部”,“deptLoc”:“北京海淀区”},{“deptId”:40,“deptName”:“外联部”,“deptLoc”:“上海黄浦区”},{“deptId”:230,“deptName”:“公关部”,“deptLoc”:“武汉汉正街”},{“deptId”:240,“deptName”:“人事部”,“deptLoc”:“天津塘沽区”},{“deptId”:490,“deptName”:“公关部”,“deptLoc”:“武汉汉正街”}]
然后前端动态生成该员工信息的下拉列表:
<div class="form-group">
<label for="" class="col-sm-2">部门</label>
<div class="col-sm-8">
<select name="deptId" id="deptId" class="form-control">
<option value="">请选择部门</option>
</select>
</div>
</div>
//动态生成部门列表
var deptId = $('#deptId');
$.getJSON(baseUrl + 'QueryDeptServlet',function(data){
htmlStr = '';
$.each(data,function(index,el){
htmlStr = '';
htmlStr += '<option value="' + el.deptId + '">' + el.deptName + '</option>';
deptId.append(htmlStr);
});
});