前言
为了用户在填写信息时遇到下拉列表数据和数据库不统一的问题，以解决不必要的麻烦，所以用到ajax获取后台查询的数据库数据展示到页面上
一、数据字典创建
数据字典主要做的是表的查询一般不做增删改；数据字典一般是一个项目中不经常改变或者数据是其他数据表经常用到的数据提取出来做成一个数据的集合放到一个表中
二、准备工作
1.数据字典
2.后端代码
表结构：
2.1数据库实体类
package com.shuju.bean; import java.io.Serializable; public class Shuju implements Serializable { private int id; private int parentId; private String name; public int getId() { return id; } public void setId(int id) { this.id = id; } public int getParentId() { return parentId; } public void setParentId(int parentId) { this.parentId = parentId; } public String getName() { return name; } public void setName(String name) { this.name = name; } }
2.2数据库控制层
第一步下载工具类BaseDao，文章顶部展示展示的有
第二步
创建数据字典实现类实现Dao层接口
继承BaseDao工具类实现数据字典接口
package com.shuju.dao.impl; import com.shuju.bean.Shuju; import com.shuju.dao.BaseDao; import com.shuju.dao.ShujuDao; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.util.ArrayList; import java.util.List; public class ShujuDaoImpl extends BaseDao implements ShujuDao { @Override public List<Shuju> getShujuList(int parentId) { Connection conn=null; PreparedStatement pstmt=null; ResultSet rs=null; List<Shuju> list=new ArrayList<>(); try{ conn=this.getConnection();//父类的BaseDao类连接数据库方法 String sql="SELECT id,parent_id,name FROM `shuju` where parent_id=? "; pstmt=conn.prepareStatement(sql); pstmt.setInt(1,parentId); rs=pstmt.executeQuery(); while (rs.next()){ Shuju shuju=new Shuju(); shuju.setId(rs.getInt(1)); shuju.setParentId(rs.getInt(2)); shuju.setName(rs.getString(3)); list.add(shuju); } }catch (Exception e){ e.printStackTrace(); }finally { this.closeAll(conn,pstmt,rs);//父类的BaseDao类关闭方法 } return list; } }
2.3业务逻辑层
创建数据字典业务逻辑层实现类类实现service层接口
调用Dao层方法
package com.shuju.service.impl; import com.shuju.bean.Shuju; import com.shuju.dao.ShujuDao; import com.shuju.dao.impl.ShujuDaoImpl; import com.shuju.service.ShujuService; import java.util.List; public class ShujuServiceImpl implements ShujuService { private ShujuDao shujuDao=new ShujuDaoImpl(); @Override public List<Shuju> getShujuList(int parentId) { return shujuDao.getShujuList(parentId); } }
2.4Servlet层
获取前端用户输入
调用业务逻辑层代码
跳转页面
package com.shuju.servlet; import com.alibaba.fastjson.JSON; import com.shuju.bean.Shuju; import com.shuju.service.ShujuService; import com.shuju.service.impl.ShujuServiceImpl; 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 java.io.IOException; import java.io.PrintWriter; import java.util.HashMap; import java.util.List; import java.util.Map; @WebServlet("/shujuServlet") public class ShujuServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req,resp);//doGet里面调用doPost } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("UTF-8");//请求的中文乱码问题 resp.setCharacterEncoding("UTF-8");//响应的中文乱码问题 String opr = req.getParameter("opr");//选择调用的servlet中的那个方法 ShujuService shujuService=new ShujuServiceImpl();//创建业务逻辑层对象 if ("list".equals(opr)){ List<Shuju> sexlist=shujuService.getShujuList(1001); List<Shuju> minzulist=shujuService.getShujuList(1005); Map<String,Object> data = new HashMap<>(); data.put("sexlist",sexlist); data.put("minzulist",minzulist); Map<String,Object> result = new HashMap<>(); result.put("code",0); result.put("data",data); result.put("msg","成功调用"); String resultStr = JSON.toJSONString(result);//阿里巴巴的转json的工具 PrintWriter pw = resp.getWriter(); pw.write(resultStr);//设置要返回的内容 pw.close(); } } }
2.前端代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> 性别：<select id="Sexselect"> </select> </form> </body> <script src="js/jquery.js"></script><!--引用jquery--> <script> $.ajax({ url:"shujuServlet?opr=list", type:"post", data:{ }, dataType:"json", success:function (data){ var Sexselect=document.getElementById("Sexselect"); Sexselect.innerHTML="<option value='0'>请选择</option>";<!--给初始值--> for (var i=0;i<data.data.sexlist.length;i++){ var shujulist=data.data.sexlist[i]; var option=document.createElement("option"); option.setAttribute("value",shujulist.id);<!--后端可获取的值--> option.setAttribute("name","projectId");<!--后端调用的名字--> option.innerHTML=shujulist.name;<!--列表里显示的值--> Sexselect.appendChild(option); } } }) </script> </html>
三、最后展示
url框输入前端网页的地址
总结
以上代码可供参考，如有报错可随时提出
