springboot database query, js achieve two effects linkage

1. Database Design

 

 

 Implement oracle, mysql database link different different data types

2. Add a page to jump to when the data to the database query parent_id = 0, is stored in modelMap into add.html page

@GetMapping ( "/ the Add" ) 
public String the Add ( a ModelMap the mmap) { 
   // the type of the database query, the database returns oracle and mysql etc. 
   List <DatabaseVo> databaseVo = matedataService.selectDatabases (); 
   mmap.addAttribute ( "Databases" , databaseVo) ; return "/ the Add" ; 
}

Returned data is received using custom DatabaseVo;

public class DatabaseVo implements Serializable {
    private static final long serialVersionUID = 1L;
    //编号
    private Long id;
    //数据库名称
    private String name;
}

3. Jump to page add.html

<div class="form-group">
    <label class="col-sm-3 control-label">数据库类型：</label>
        <div class="col-sm-8">
             <select class="form-control m-b" id="database" th:name="databaseId">
                  <option value="">请选择数据库</option>
                  <option th:each="database : ${databases}" th:value="${database.id}" th:text="${database.name}"></option>
             </select>
   　　 </div>
</div>

<div class="form-group">
     <label class="col-sm-3 control-label">数据项类型：</label>
        <div class="col-sm-8">
                <select name="type" id="types" class="form-control m-b" >
                    
                </select>
       　</div>
</div>

Code for associating with 4.js

    $("#database").change(function () {
        var databaseId = $("#database").val();
        if (databaseId == null) {
            return;
        }
        $.ajax({
            cache: true,
            type: "get", url: prefix + "/getTypeByDataBaseId", data: {"databaseId": databaseId}, success: function (data) { console.log(data); var types = $("#types").empty(); for (var i = 0; i < data.data.length; i++) { types.append("<option value = '"+ data.data[i].name + "'>" + data.data[i].name + "</option>"); } } }) })

The id to query the database's data type, the returned data is consistent with the database

    @GetMapping ( "/ getTypeByDataBaseId" ) 
    @ResponseBody 
    public AjaxResult getTypeByDataBaseId (@RequestParam ( "DatabaseID" ) Long ID) { 
        // The database query corresponding to the data type Id 
        List <TypeVo> typeVo = matedataService.selectTypesByDatabaseId (ID); 
        IF ( == null typeVo ) {  the throw a RuntimeException new new ( "empty data!" );  }  return AjaxResult.success (typeVo);}

6. achieve results

 

======================================================================================

 

======================================================================================

7. Summary

Basically the idea is to achieve this, the database design vary, some details may not be everyone's the same, you can adjust.