103. ajax 请求加载select 下拉框

最新推荐文章于 2021-08-26 14:16:30 发布

weixin_34310127

最新推荐文章于 2021-08-26 14:16:30 发布

阅读量103

点赞数

原文链接：https://my.oschina.net/springMVCAndspring/blog/1793654

版权

2019独角兽企业重金招聘Python工程师标准>>>

1. 效果

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

           
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>bootstrap入门</title>
       
       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
       
       <script src="js/jquery-3.2.1.js"></script>
       
       <script src="js/bootstrap.min.js"></script>
       <script type="text/javascript">
       $(function(){
       $.ajax({
   url: "${pageContext.request.contextPath}/selectAjax.action", //后台返回json数据
   type: "post",
   dataType: "json",
   contentType: "application/json",
   traditional: true,
   success: function (data) {
       var optionstring = "";
       for (var i = 0; i < data.length; i++) {
           optionstring += "<option value=" + data[i].id +" >" +data[i].username+"</option>";
           $("#selectId").html("<option value='0' >请选择...</option> "+optionstring);
       }
   },
   error: function (msg) {
   alert("出错了！");
   }
   });
       });
       </script>
</head>
<body >
       <label class="col-md-2 control-label">请选择员工：</label>
       <div class="col-md-3">
           <select id="selectId" name="workage" class="selectpicker show-tick form-control" data-live-search="false">
</select>
       </div>
</body>
</html>

2. 完成过程

2.1 前端

2.2 后台（使用fastjson：先导入）

/**
   * 6. 前端发送ajax请求然后后台返回对应数据并在前端展示为下拉列
   * @Title: responJson
   * @Description:
   * @param response
   * @return void
   * @throws
   */
   @RequestMapping("/selectAjax.action")
   public void selectAjax(HttpServletResponse response ){
       response.setHeader("Content-type", "text/html;charset=UTF-8");
       try {

           List<Object> list = new ArrayList<Object>();
           User user = new User();
           user.setId(1);
           user.setUsername("张三");
           User user2 = new User();
           user2.setId(2);
           user2.setUsername("李四");
           list.add(user);
           list.add(user2);

           String jsonStri = JSONObject.toJSONString(list);//fastJson 将list转化为json格式数据
           //输出流对象返回给ajax请求
           PrintWriter out = response.getWriter();
           out.write(jsonStri);

       } catch (IOException e) {
           e.printStackTrace();
       }

   }