Appelez les données du dictionnaire de données via ajax pour les ajouter dynamiquement à la liste déroulante de la page Web

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

avant-propos

1. Création du dictionnaire de données

2. Préparation

1. Dictionnaire de données

2. Code principal

2.1 Classe d'entité de base de données

2.2 Couche de contrôle de la base de données

2.3 Couche logique métier

2.4 Couche servlet

2. Code frontal

3. Affichage final

Résumer


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

Je suppose que tu aimes

Origine blog.csdn.net/zky__sch/article/details/131307211
conseillé
Classement