前端JS中遇到的问题

为了实现以下效果图

遇到的问题1 ： 如何设置点击 哨兵名称的 输入框，自动从数据库中查询，从而弹出数据库中存在的表。

Html的代码为：

 <input id="groupName" type="text" placeholder="请输入哨兵组名" list="group" onchange="chooseFunction()">
                <datalist id="group">
                </datalist>

对应的JS文件为：

<script>
    $.ajax({
        type: "get",
        url: "/baseAlarm/group", // 查询数据库的接口
        data: {},
        async: false,
        success: function (data) { // 返回的数据类型为List
            var str = "";
            if (data != null) {
                for (var i = 0; i < data.length; i++) {
                    str = str + '<option  value="' + data[i].toString() + '">';
                }
                $("#group").html(str); // 以下拉框的形式存在
            }
        },
        error: function () {
            alert("查询失败!请联系管理员。")
        }
    });
</script>

遇到的问题2 ： 如何点击 "智慧哨兵组1 " 触发 自动填充的方法。

采用的方法是在Input中，存在οnchange=" 方法名" 的方法：即，当输入框的内容改变时，触发事件。

Html代码同上：

 <input id="groupName" type="text" placeholder="请输入哨兵组名" list="group" onchange="chooseFunction()">  // 主要是 onchange方法。
                <datalist id="group">
                </datalist>

// 报警类型的主要代码
  			<div class="query-right">
                <select id="alarmType">
                    <option value="0">无</option>
                    <option value="1">声光报警</option>
                </select>
            </div>

//报警的时长
			<div class="query-right">
                <input id="alarmTime" type="text" placeholder="单位：S"/>
            </div>

// 雷达报警单选框
  			<div class="query-right" id="radarTrigger">
                <label>是</label>
                <input type="radio" value=1 name="radarTrigger" id="isRadarAlarm">
                <label>否</label>
                <input type="radio" value=0 name="radarTrigger" id="noRadarAlarm">
            </div>

// 物体识别报警的单选框
			<div class="query-right" id="objTrigger">
                <label>是</label>
                <input type="radio" value=1 name="objTrigger" id="isObjAlarm">
                <label>否</label>
                <input type="radio" value=0 name="objTrigger" id="noObjAlarm">
            </div>

JS代码的实现为： 此方法主要是输入改变后，自动填充数据

function chooseFunction() {
        var groupName = $('#groupName').val();
        var str = "";
        console.log(groupName);
        $.ajax({
            type: "post",
            url: "/baseAlarm/getInfo", // 数据库根据组名查询对应的表单对象信息
            data: JSON.stringify({"groupName": groupName}), // 一会在介绍JSON.stringify的使用
            contentType: "application/json",
            dataType: "json",
            async: false,
            success: function (result) { // 返回的结果是自定义的AjaxResponse对象
                // 此时返回的数据是正常的
                if (result.s == 1) {
                    var deviceGroup = result.data;
                    console.log(deviceGroup);
                    // 填充报警方式
                    var alarmType = deviceGroup.alarmType; // 填充信息主要 用的是 .val方法
                    $("#alarmType").val(alarmType); // 对select选择框，通过select的ID更改状态。
                    // 填充报警时长
                    str = str + deviceGroup.alarmTime.toString(); //input类型的主要传入sreing类型即可
                    $('#alarmTime').val(str);
                    // 填充物体识别单选框
                    if (deviceGroup.isIdentifyTrigger == 1) {
                        $('#isObjAlarm').prop('checked', 'true'); // 对单选框的操作，主要是通过Id，改变被选中的状态。  通过.prop进行状态的选择
                    } else {
                        $('#noObjAlarm').prop('checked', 'true');
                    }
                    // 填充雷达报警单选框
                    if (deviceGroup.isRadarTrigger == 1) {
                        $('#isRadarAlarm').prop('checked', 'true');
                    } else {
                        $('#noRadarAlarm').prop('checked', 'true');
                    }
                    // 结束时间
                    var endTime = ""; // 时间的填充也是input类型的
                    if (deviceGroup.endHour <= 9 ) {
                        endTime =  "0" + deviceGroup.endHour.toString() + ":" + deviceGroup.endMinute.toString();
                        if (deviceGroup.endMinute <= 9 ) {
                            endTime = "0" + deviceGroup.endHour.toString() + ":" + "0" + deviceGroup.endMinute.toString();
                        }
                    } else {
                        if (deviceGroup.endMinute <= 9) {
                            endTime = deviceGroup.endHour.toString() + ":" + "0" + deviceGroup.endMinute.toString();
                        } else {
                            endTime =  deviceGroup.endHour.toString() + ":" + deviceGroup.endMinute.toString();
                        }
                    }
                    $('#alarmEndTime').val(endTime);

                    // 开始时间
                    var startTime = "";
                    if (deviceGroup.startHour <= 9 ) {
                        startTime =  "0" + deviceGroup.startHour.toString() + ":" + deviceGroup.startMinute.toString();
                        if (deviceGroup.startMinute <= 9 ) {
                            startTime = "0" + deviceGroup.startHour.toString() + ":" + "0" + deviceGroup.startMinute.toString();
                        }
                    } else {
                        if (deviceGroup.startMinute <= 9) {
                            startTime = deviceGroup.startHour.toString() + ":" + "0" + deviceGroup.startMinute.toString();
                        } else {
                            startTime =  deviceGroup.startHour.toString() + ":" + deviceGroup.startMinute.toString();
                        }
                    }
                    $('#alarmStartTime').val(startTime);
                } else {
                    console.log("没有这个组,啥也不干");
                }
            }
        })
    }

需求：前端实现：点击按钮时，初始化一些内容。

 window.onload=function(){
// 方法体内实现要初始化进行的操作
}

需求：子模块点击按钮时，主页面进行刷新。

   setTimeout(function () {
                    parent.window.location.reload(); // 如果不针对父页面就删除parent
                }, 1000);