Astuce : Une fois l'article rédigé, la table des matières peut être générée automatiquement. Pour la générer, reportez-vous au document d'aide à droite.
Annuaire d'articles
Table des matières
1. Création du dictionnaire de données
2.1 Classe d'entité de base de données
2.2 Couche de contrôle de la base de données
avant-propos
Afin que les utilisateurs rencontrent le problème d'incohérence entre les données de la liste déroulante et la base de données lors du remplissage des informations, pour résoudre les problèmes inutiles, ajax est utilisé pour obtenir les données de la base de données de la requête en arrière-plan et les afficher sur la page
1. Création du dictionnaire de données
L'objectif principal du dictionnaire de données est d'interroger la table et généralement de ne pas ajouter, supprimer ou modifier ; le dictionnaire de données est généralement un projet qui ne change pas fréquemment ou les données sont souvent utilisées par d'autres tables de données, extraites et transformées en une collection de données et placé dans un tableau
2. Préparation
1. Dictionnaire de données
2. Code principal
Structure du tableau :
2.1 Classe d'entité de base de données
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 Couche de contrôle de la base de données
La première étape consiste à télécharger la classe d'outils BaseDao, qui s'affiche en haut de l'article.
deuxième étape
Créer une classe d'implémentation de dictionnaire de données pour implémenter l'interface de couche Dao
Hériter de la classe d'outils BaseDao pour implémenter l'interface du dictionnaire de données
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 Couche logique métier
Créer une classe d'implémentation de la couche de logique métier du dictionnaire de données pour implémenter l'interface de la couche de service
Appelez la méthode de couche 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.4 Couche servlet
Obtenir l'entrée de l'utilisateur frontal
Appelez le code de la couche de logique métier
saut de page
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. Code frontal
<!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>
3. Affichage final
Entrez l'adresse de la page Web frontale dans la zone URL
Résumer
Le code ci-dessus est pour référence, s'il y a une erreur, vous pouvez le soumettre à tout moment