ajax を介してデータ ディクショナリ データを呼び出し、Web ページのドロップダウン リストに動的に追加します。

ヒント: 記事を作成した後、目次を自動的に生成できます。生成方法は、右側のヘルプドキュメントを参照してください。 

記事ディレクトリ

目次

序文

1. データ辞書の作成

2. 準備

1. データディクショナリ

2. バックエンドコード

2.1 データベースエンティティクラス

2.2 データベース制御層

2.3 ビジネスロジック層

2.4 サーブレット層

2. フロントエンドコード

3. 最終表示

要約する

---

序文

ユーザーが情報を入力するときにドロップダウンリストのデータとデータベースの間で不一致の問題が発生するため、不要なトラブルを解決するために、ajaxを使用してバックグラウンドクエリのデータベースデータを取得し、それを画面に表示します。ページ

1. データ辞書の作成

データ ディクショナリの主な目的はテーブルにクエリを実行することであり、通常は追加、削除、変更は行いません。データ ディクショナリは通常、頻繁に変更されないプロジェクトであるか、データが他のデータ テーブルで頻繁に使用され、抽出されて作成されます。データのコレクションをテーブルに配置する

2. 準備

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 ビジネスロジック層

データ ディクショナリ ビジネス ロジック層実装クラスを作成してサービス層インターフェイスを実装する

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 サーブレット層

フロントエンドのユーザー入力を取得する

ビジネスロジック層のコードを呼び出す

ジャンプページ

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>

3. 最終表示

URL ボックスにフロントエンド Web ページのアドレスを入力します。

要約する

上記のコードは参考用です。エラーがある場合は、いつでも送信できます。