ajax+jQuery+Javascript实现简单二级联动

最新推荐文章于 2018-11-07 17:25:42 发布

原创最新推荐文章于 2018-11-07 17:25:42 发布 · 613 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #ajax #function #exception #callback

本文介绍了一个使用Ajax实现的二级联动功能，包括前端页面的交互逻辑和后端数据处理过程。前端通过Ajax请求从服务器获取数据，并动态更新下拉列表选项；后端则根据请求参数查询数据库并返回XML格式的数据。

前台页面：

//ajax二级联动 function fileChange(){ $("#msg").ajaxSend(function(evt, request, settings){ $(this).append("正在更新数据..."); }); var fileId=$(":select[name='fileId']").val(); var timestamp = Date.parse(new Date());//时间戳 //获得sheetId对象 var select=document.getElementById("form1").sheetId; //删除该节点下内容 delOption(select); $.ajax({ type: "get", url: url+timestamp, data: "&fileId="+fileId, cache: false, dataType: "xml", success: function(a){ callback(a);} }); $("#msg").ajaxSuccess(function(evt, request, settings){ $(this).remove(); }); } function callback(data){ var select=document.getElementById("form1").sheetId; $(data).find("sheetRow").each(function(i){ addOption(select,$(this).text(),$(this).attr("sheetid")); }); } //删除select节点 function delOption(select){ var len=select.options.length; while(len>1){ select.remove(1); len--; } } //添加节点 function addOption(select,otext,ovalue){ var oOption = document.createElement("OPTION"); select.add(oOption); oOption.innerText = otext; oOption.value = ovalue; }

后台：

public ActionForward List(ActionMapping mapping, ActionForm baseForm,
   HttpServletRequest request, HttpServletResponse response)
   throws Exception {
   try{

   String fileId="";
   if(request.getParameter("fileId")!=null){
    fileId=request.getParameter("fileId");
   }
   List<TemplateSheetVOImpl> tempList=templateControlService.getSheetListByFileId(fileId);
   if(tempList!=null&&tempList.size()>0){
    //封装成xml格式文本
    String sheetXml=this.packageToXML(tempList);
    System.out.println(sheetXml);
    response.setContentType("text/xml;charset=UTF-8");
    response.getWriter().write(sheetXml);//返回xml格式字符串
   }else{
    response.getWriter().write("0");//获取失败
   }
   }catch(Exception e){
    e.printStackTrace();
   }

  return null;
}
/**
* 封装sheet信息，封装成xml文本
* @param tempList
* @return
*/
private String packageToXML(List<TemplateSheetVOImpl> tempList) {
  StringBuffer strbuff=new StringBuffer();
  //strbuff.append("<?xml version='1.0' encoding='UTF-8'?>");
  strbuff.append("<sheet>");
  for (int i = 0; i < tempList.size(); i++) {
   strbuff.append("<sheetRow sheetid='"+tempList.get(i).getSheetId()+"'>");
   strbuff.append(tempList.get(i).getSheetName());
   strbuff.append("</sheetRow>");
  }
  strbuff.append("</sheet>");
  return strbuff.toString();
}