select2的ajax的应用

最新推荐文章于 2023-11-20 12:01:13 发布

zcaixx

最新推荐文章于 2023-11-20 12:01:13 发布

阅读量212

点赞数

CC 4.0 BY-SA版权

分类专栏： select2 文章标签： select2

本文链接：https://blog.youkuaiyun.com/zcaixx/article/details/87931501

select2 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Select2组件结合AJAX实现动态数据加载，包括HTML、JavaScript和后端Controller代码示例，展示了从请求参数到数据处理及响应的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

<!DOCTYPE html>
<html>
	<head>
		<link href="../Portal/static/assets/css/select2.css" rel="stylesheet"/>
     		<script src="../Portal/static/assets/js/select2.js"></script>
     		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script><!--jQuery-->
	</head>
	<body>
		<select style="width: 186px;" name="cargo_code_search" id="cargo_code_search">
	         </select>
	</body>
	<script type="text/javascript">
	$(function(){    
            var placeholder = "请选择";
            $("#cargo_code_search").select2({
              ajax: {
                  type:'POST',
                  url: "/makeUpMass_num?mass_sel=18110105",
                  dataType: 'json',
                  delay: 250,
                  data: function (params) {
                      return {
                          q: params.term, // search term 请求参数 ， 请求框中输入的参数
                          page: params.page
                      };
                  },
                  processResults: function (data, params) {
                      params.page = params.page || 1;
                      return {
                          results: data,//itemList
                          pagination: {
                              more: (params.page * 30) < data.total_count
                          }
                      };
                  },
                  cache: true
              },
              placeholder:'请选择',//默认文字提示
              language: "zh-CN",
              tags: true,//允许手动添加
              allowClear: true,//允许清空
              escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
              minimumInputLength: 0,//最少输入多少个字符后开始查询
              formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
              formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
            });
        });
 	</script>
 </html>

Controller:

@RequestMapping(value = "/makeUpMass_num")
@ResponseBody
public void makeUpMass_num(HashMap map,HttpServletRequest request, HttpServletResponse response,HttpSession httpSession) {
   response.setContentType("application/json;charset=utf-8");
	   Gson gson = new Gson();
	   HashMap hashMap=new HashMap();
	   List<HashMap> dataList= new ArrayList<HashMap>();
	   String mass_sel=request.getParameter("q")==null?"":request.getParameter("q");
	   int first=mass_sel.indexOf("-");
	   int zonglength=mass_sel.length();
	   int end= mass_sel.indexOf("-",first+1);
	   int masslength=end-first;
	   int other=zonglength-first;
	   String scn="";
	   if(first>0&&(masslength==9||(masslength<0&&other==9))) {
	    scn = mass_sel.substring(first+1, first+9);
	    hashMap.put("scn", scn);
	          dataList = massManageService.makeUpMass_num(hashMap);
	   }
	   PrintWriter out;
	   try {
	    out = response.getWriter();
	   } catch (IOException e) {
	    e.printStackTrace();
	   }
	   List<Map<String, String>> res = new ArrayList<>();
	   if(dataList.size()>0) {
	    for (int i = 0; i < dataList.size(); i++) {
	     Map<String, String> tmp = new HashMap<>();
	     if(masslength<0){
	      scn=mass_sel;
	     }else{
	      scn=mass_sel.substring(0,end);
	     }
	     String tmpS= scn+","+dataList.get(i).get("shipname")+","+dataList.get(i).get("cargo_name");
	     if(tmpS.contains(mass_sel)){
	      tmp.put("id", tmpS);
	      tmp.put("text", tmpS);
	      res.add(tmp);
	     }
	    }
	   }else {
	    Map<String, String> tmp = new HashMap<>();
	    tmp.put("id", "");
	    tmp.put("text", "");
	    res.add(tmp);
	   }
	   
	   try {
	    out = response.getWriter();
	    out.println(gson.toJson(res));
	    out.close();
	   } catch (IOException e) {
	    e.printStackTrace();
	   }
}

涉及到的jar包：https://download.youkuaiyun.com/download/zcaixx/10975962