js知识点积累

js知识点积累

1、js如何在jsp中，通过点击事件创建多个表单？

这里主要通过dom对象，用innerHTML或appendChild来创建多个表单。但是要注意的是element.innerHTML会将element原来的代码覆盖，而appendchild会在element中进行追加。

参考

• DOM向HTML中添加元素Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type 'Node’问题
• js中appendChild()用法
• 解决JS 中 innerHTML is not a function

...
<div id="selectAdd">
    <div class="parametersetup_title">所选特征：</div>
    <div class="parametersetup_content">
        <div id="bbb">
            <select id="Feature" name="Feature">
                <%--<%	for(int i=1;i<=inputdata.getdimension();i++)--%>
                <%--{%>--%>
                <%--<option value="<%= String.valueOf(i)%>"--%>
                <%--<%if(i==1) {%>selected<%}%>><%= inputdata.getcolname(i)%>--%>
                <%--</option>--%>
                <%--<%	}%>--%>
            </select>
            <input type="button" value="添加" onclick="add()"/>
        </div>
    </div>
</div>
...
<script type="text/javascript">

	//将java数组转化成json，可和js进行类型转换
    var featureName = <%= featureName%>;  //不知道为啥子不能用el表达式，只能用jsp表达式

    //console.log(featureName)

	//判断"数据序列"选了什么，避免特征选择和数据序列选择重复
	var sequenceId = document.getElementById("Sequence").selectedIndex;
	//console.log((sequenceId))

	innerHTMLStr = "";
	if(sequenceId == 0){
        var k = 0;
        for (var i = 1; i < featureName.length; ++i){
            if(k == 1){
                innerHTMLStr += "<option value =" + (i + 1) + "selected>" +  featureName[i] + "</option>";
			}else{
                innerHTMLStr += "<option value =" + (i + 1) + ">" +  featureName[i] + "</option>";
			}
        }
	}else{
        var k = 0;
        for (var i = 0; i < featureName.length; ++i){
            if(k == 0){
                innerHTMLStr += "<option value =" + (i + 1) + "selected>" +  featureName[i] + "</option>";
            }else if(k != sequenceId){
                innerHTMLStr += "<option value =" + (i + 1) + ">" +  featureName[i] + "</option>";
            }
        }
	}

    document.getElementById("Feature").innerHTML = innerHTMLStr;

    function add(){

        var dom1 = document.createElement('div');
        dom1.className = 'parametersetup_title';
        document.getElementById("selectAdd").appendChild(dom1);

        var dom2 = document.createElement('div');
        dom2.className = 'parametersetup_content';

        var str = "<select>";

        innerHTMLStr = "";
        if(sequenceId == 0){
            var k = 0;
            for (var i = 1; i < featureName.length; ++i){
                if(k == 1){
                    innerHTMLStr += "<option value =" + (i + 1) + "selected>" +  featureName[i] + "</option>";
                }else{
                    innerHTMLStr += "<option value =" + (i + 1) + ">" +  featureName[i] + "</option>";
                }
            }
        }else{
            var k = 0;
            for (var i = 0; i < featureName.length; ++i){
                if(k == 0){
                    innerHTMLStr += "<option value =" + (i + 1) + "selected>" +  featureName[i] + "</option>";
                }else if(k != sequenceId){
                    innerHTMLStr += "<option value =" + (i + 1) + ">" +  featureName[i] + "</option>";
                }
            }
        }

        str += innerHTMLStr + "</select>";
        console.log(str);
        dom2.innerHTML = str;
        document.getElementById("selectAdd").appendChild(dom2);
    }
</script>

运行效果：

2、js创建二维数组

参考JS定义二维数组的三种方法

3、js用split()切分字符串

js在接收java的JSON数据（假设为arr）时，需要对数据进行split，但是直接用会出现问题，需要将arr转成字符串（toString()）参考value.split is not a function 的原因

4、iframe子页面如何给父页面传值

父页面: BOOST.jsp
<div id="BOOST_con4" style="display:none">
	<iframe name="SHOWDATA_BOOST" src="../../resultshow/resultDrivenBOOST.jsp"></iframe>
</div>

子页面: resultDrivenBOOST1.jsp
function submitModelNum(modelNum) {
		var innerHTMLStr = "";
		innerHTMLStr += '<input type="hidden" name="modelNum" value="' + modelNum + '">';

		var div = document.createElement('div');
		div.innerHTML = innerHTMLStr;

		document.getElementById("modelSelect").appendChild(div);

        //把执行等待滚动条打开
        // document.getElementById("loader_container1").style.display="block";

        //通过父页面把分析结果的页面打开
		//parent.document.getElementById("BOOST_tab5").style.display="block";

		//子页面给父页面传值
		var label = document.getElementById("label").value;
		var height = document.getElementById("height" + modelNum).value;
		var times = document.getElementById("times" + modelNum).value;
		var threshold = document.getElementById("threshold" + modelNum).value;
		parent.getChildVal(featureIndexStr,label,height,times,threshold);
}

父页面:BOOST.jsp:
...
function getChildVal(features,label,height,times,threshold){

        document.getElementById("Sequence").value = label;
	    document.getElementById("featureBox").value = features;
	    document.getElementById("BOOST_parameter1").value = height;
        document.getElementById("BOOST_parameter2").value = times;
        document.getElementById("BOOST_parameter3").value = threshold;
        alert(features + ' ' + height + ' ' + times + ' ' + threshold);

        validate_BOOST(document.parameterform,1);

        document.parameterform.action="../../resultshow/resultDrivenBOOST1.jsp";
        document.parameterform.target="SHOWDATA_BOOST1";
        document.getElementById("model").value = "BOOST";
        document.parameterform.submit();
}

实现功能：

• 子页面resultDrivenBOOST.jsp给主页面BOOST.jsp传值
• 主页面获取子页面的值，修改表单数据，并实现表单提交
  

参考

• 关于使用iframe的父子页面进行简单的相互传值

• js之iframe子页面与父页面通信

5、用js判断复选框（checkbox）是否选中的问题

参考用js判断复选框（checkbox）是否选中的问题

6、js阻止表单提交默认行为的两种方式

参考js阻止表单提交默认行为的两种方式

7、js操作Map对象

• js中遍历Map对象
• JS获取对象的value方式
• js 创建类似java map集合

8、js定义二维数组（变长的）

• js如何定义二维数组

9、js读取文件表单

• js通过input type="file"获取文件名方法

• JS-读取文件内容

10、js解析json字符串为json对象

• js 将json字符串转换为json对象的方法解析

11、js使用ajax + setInterval实现视频实时检测

如果单纯使用ajax访问服务器的话，前端页面会卡死，例如这样

while(true){
    var xhr = new XMLHttpRequest();
    console.log('新建xhr对象，readyState的值：' + xhr.readyState);

    xhr.open('GET', 'http://127.0.0.1:5000/video_detect');
    <!--                console.log('使用open方法后，readyState的值：' + xhr.readyState);-->
    xhr.send();

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            <!--                        console.log(xhr.statusText);-->
            console.log(xhr.responseText);
        }
    };

    postMessage(xhr.responseText);
}

我考虑过许多方法，由于自己js太差了，多线程的worker，H5的postMessage，addEventListener不知道怎么用（附一下参考链接，方便以后学习），后来想到了js定时器，最后总算能实现这个功能了（参考https://www.runoob.com/w3cnote/js-timer.html）。

下面是菜鸟教程给的例子：

<html>
<body>

<input type="text" id="clock" />
<script type="text/javascript">
    var int=self.setInterval("clock()",1000);
    function clock()
    {
        var d=new Date();
        var t=d.toLocaleTimeString();
        document.getElementById("clock").value=t;
    }
</script>

<button onclick="int=window.clearInterval(int)">停止</button>

</body>
</html>

经过修改，可以实现将视频的检测结果实时显示在页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="result"></div>
</body>
<script>

    var res=self.setInterval("getResult()",100);

    function getResult(){
        var result = document.getElementById("result")
        var xhr = new XMLHttpRequest();
        console.log('新建xhr对象，readyState的值：' + xhr.readyState);

        xhr.open('GET', 'http://127.0.0.1:5000/video_detect');
        <!--                console.log('使用open方法后，readyState的值：' + xhr.readyState);-->
        xhr.send();

        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                <!--                        console.log(xhr.statusText);-->
                 console.log(xhr.responseText);
                result.innerHTML = xhr.responseText
            }
        };
    }
</script>
</html>

ajax：
https://www.cnblogs.com/asheng2016/p/7435426.html
https://www.cnblogs.com/jackzhoumine/p/6562890.html

多线程：
https://www.cnblogs.com/langkezzz/p/10157274.html

监听器：
addListener：https://www.it1352.com/2027330.html
addEventListener：https://blog.csdn.net/qq_31879707/article/details/54894857
https://www.jianshu.com/p/3d8748f85a06

定时器
setInterval：https://www.runoob.com/w3cnote/js-timer.html