• 级联展示一 ——展示从数据查处的数据(jQuery-ajax)


      思路:设计数据库(查询时注意两个表的关联)

        实现实体类。

        实现service层(从数据查询数据)

        servlet的具体方法(用于前端的ajax请求,返回json数据)

      展示图:

         

      数据库设计表:alldate

    xsdate:

     

     

     具体实现代码:

      

    <%@page import="com.service.JsonUtils"%>
    <%@page import="User.Alldata"%>
    <%@page import="java.util.List"%>
    <%@page import="com.service.MessageService"%>
       <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
         <%
         String sql="select * from alldate";
         List<Alldata> meslist=MessageService.getalldate(sql);
         request.setAttribute("meslist", meslist);
         
         
         %>
         <div>
             <select id="yewu">
                         <option value="0" >请选择....... </option>
                 <c:forEach items="${meslist}" var="mes">
                         <option value="${mes.typeid}">${mes.yewu}</option>
                 </c:forEach>
             </select>
         
         </div>
         <div>
             <select id="xsyewu">
                         
                 
             </select>
         
         </div>
         
         
         
         
    </body>
      <script type="text/javascript"  src="js/jquery.min.js"></script>
      <script type="text/javascript">
          $(document).ready(function(){
              $("#yewu").change(function () {
                var obj=$("#yewu>option:selected");
                //当改变后选择的是请选择的时候 不执行后面的操作
                if (obj.val()=="0") {
              $("#xsyewu").empty();
                    $("#xsyewu").append("<option value='0'>请选择.......</option>");
    return; } var xtypeid=obj.val(); //alert(xtypeid); $.post("MessageServlet?method=xsdata",{xtypeid:xtypeid},function(resp){ //首先清空级联二框中的内容 $("#xsyewu").empty(); //将前台响应的数据展示在select中 $.each(resp,function(i,n){ $("#xsyewu").append("<option value='"+n.xsyw+"'>"+n.xsyw+"</option>"); }) },"json"); }); $("#xsyewu").change(function () { var obj=$("#xsyewu>option:selected"); alert(obj.val()); });
    });
    </script> </html>

    第一级实体类:

      

    package User;
    
    public class Alldata {
    
        private String typeid;
        private String yewu;
        public String getTypeid() {
            return typeid;
        }
        public void setTypeid(String typeid) {
            this.typeid = typeid;
        }
        public String getYewu() {
            return yewu;
        }
        public void setYewu(String yewu) {
            this.yewu = yewu;
        }
        public Alldata() {
            super();
        }
        
        
    }

    第二级实体类:

    package User;
    
    public class xsdate {
        
        private    String xtypeid;
        private    String xsyw;
        public String getXtypeid() {
            return xtypeid;
        }
        public void setXtypeid(String xtypeid) {
            this.xtypeid = xtypeid;
        }
        public String getXsyw() {
            return xsyw;
        }
        public void setXsyw(String xsyw) {
            this.xsyw = xsyw;
        }
        public xsdate() {
            super();
        }
        
        
        
    }

    从数据库查询数据:

    //查询级联二层数据具体信息
            private void xsdata(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException, SQLException {
                req.setCharacterEncoding("utf-8");
                resp.setContentType("text/html;charset=utf-8");
                
                String xtypeid=req.getParameter("xtypeid");
    //            System.out.println(xtypeid);
                String sql="select * from xsdate where xtypeid='"+xtypeid+"'";
                List<xsdate> meslist=MessageService.getxsdate(sql);
                String list=JsonUtils.toJson(meslist);
                
                //向前台响应ajax数据
                PrintWriter pw=resp.getWriter();
                
                pw.println(list);
                pw.flush();
                pw.close();
                
                
    
    
                
            }

    servlt响应ajax请求,返回Json数据

    package com.servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.io.StringReader;
    import java.sql.SQLException;
    import java.util.List;
    
    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.service.JsonUtils;
    import com.service.MessageService;
    
    import User.Users;
    import User.userInfo;
    import User.usermess;
    import User.xsdate;
    import jdk.nashorn.internal.scripts.JS;
    import net.sf.json.JSON;
    import net.sf.json.JSONArray;
    import net.sf.json.JSONObject;
    import net.sf.json.util.JSONUtils;
    
    
    
    
    
    
    @WebServlet("/MessageServlet")
    public class MessageServlet extends HttpServlet {
    
        private static final long serialVersionUID = 1L;
    
        /**
         * 方法选择
         */
        protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            req.setCharacterEncoding("utf-8");
            String method = req.getParameter("method");
                     if ("xsdata".equals(method)) {
                try {
                    xsdata(req,resp);
                } catch (SQLException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
    //        
    //        
            
    }
        //查询级联二层数据具体信息
            private void xsdata(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException, SQLException {
                req.setCharacterEncoding("utf-8");
                resp.setContentType("text/html;charset=utf-8");
                
                String xtypeid=req.getParameter("xtypeid");
    //            System.out.println(xtypeid);
                String sql="select * from xsdate where xtypeid='"+xtypeid+"'";
                List<xsdate> meslist=MessageService.getxsdate(sql);
                String list=JsonUtils.toJson(meslist);
                
                //向前台响应ajax数据
                PrintWriter pw=resp.getWriter();
                
                pw.println(list);
                pw.flush();
                pw.close();
                
                
    
    
                
            }
        
        
    
    }
                        

    转换数据类型为Json的工具类

    package com.service;
    
    import java.text.SimpleDateFormat;
    
    import com.fasterxml.jackson.core.JsonProcessingException;
    import com.fasterxml.jackson.databind.ObjectMapper;
    
    public class JsonUtils {
           /**
         * 序列化成json
         * */
        public static String toJson(Object obj) {
            // 对象映射器
            ObjectMapper mapper = new ObjectMapper();
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd HH:mm:ss");
            mapper.setDateFormat(sdf);
            
            String result = null;
            // 序列化user对象为json字符串
            try {
                result = mapper.writeValueAsString(obj);
            } catch (JsonProcessingException e) {
                e.printStackTrace();
            }
            return result;
        }
    }

        

  • 相关阅读:
    Word中设置文档结构图
    jQuery设计思想
    JMJS系统总结系列JMJS中使用到的Jquery工具(四)
    JMJS系统总结系列XSLT的语句规则(一)
    构建安全的数据访问组件
    JMJS系统总结系列Jquery与后台的交互方式(三)
    浮躁的搬运工
    JMJS系统总结系列Jquery分页扩展库(五)
    IIS7 授权配置错误
    JMJS系统总结系列HTML标签在XSLT 中的应用(二)
  • 原文地址:https://www.cnblogs.com/moxihuishou/p/13905050.html
Copyright © 2020-2023  润新知