天天看點
傳回

js知識點積累

js知識點積累

文章目錄

    • js知識點積累
        • 1、js如何在jsp中，通過點選事件建立多個表單？
        • 2、js建立二維數組
        • 3、js用split()切分字元串
        • 4、iframe子頁面如何給父頁面傳值
        • 5、用js判斷複選框（checkbox）是否選中的問題
        • 6、js阻止表單送出預設行為的兩種方式
        • 7、js操作Map對象
        • 8、js定義二維數組（變長的）
        • 9、js讀取檔案表單
        • 10、js解析json字元串為json對象
        • 11、js使用ajax + setInterval實作視訊實時檢測

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>

運作效果：

js知識點積累

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

     傳值
  • 首頁面擷取子頁面的值，修改表單資料，并實作表單送出
    js知識點積累
js知識點積累

參考

  • 關于使用iframe的父子頁面進行簡單的互相傳值
  • js之iframe子頁面與父頁面通信

5、用js判斷複選框（checkbox）是否選中的問題

參考用js判斷複選框（checkbox）是否選中的問題

6、js阻止表單送出預設行為的兩種方式

參考js阻止表單送出預設行為的兩種方式

7、js操作Map對象

js知識點積累
  • 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

前端 # JavaScript javascript
上一篇: 【積累】JavaScript知識點
下一篇: 知識點積累Include&lt;cassert&gt;

繼續閱讀