前端js數據處理遇到的幾大問題處理方式

        1.提交按鈕提交後會出現2次提交問題的解決和問題原因:
        在登陸頁面LOGIN.JSP中,如果提交按鈕寫成如下的方式則會提交兩次:

<script type="text/JavaScript">
function loginFunc(){
    var form = document.getElementById("form1");
    form.submit();
}
</script>

<form action="processLogin.action" method="post" id="form1">
<s:textfield name="username" cssClass="input" style="width:150px;" value=""></s:textfield>
<s:password name="password" cssClass="input" style="width:150px;" value=""></s:password>
<input type="submit" onclick="loginSystem()"/>//問題出在這一行
</form>

        submit類型本身就會提交到ACTION類;onclick方法中又調用了一次submit提交方法,所以導致執行了兩次ACTION的代碼。
解決方式:

<input type="button" onclick="loginSystem()"/>

問題2:1.導入功能點擊導入後,還可以再次點擊,於是出現重複導入的現象,思考後從模態框的角度來考慮問題。

            解決辦法:在進度條Js中新增判斷Js語句,判斷如果後端傳遞回來的數據沒有達到進度條的百分百,那麼就禁用提交和驗證按鈕。

        代碼如下:

<script>
        function submit_query(btn){
            $("#bar").attr("class", "progress-bar progress-bar-striped active");
            $("#bar").width(0);
            var sitv = setInterval(function () {
                $.ajax({
                    url: "{{ url_for("main.dataimport_progress")}}",//請求地址,後臺提供的,
                    //data: {'a':'a'},//data是傳給後臺的字段,後臺需要哪些就傳入哪些
                    //type: 'POST',//請求的方式,也有get請求
                    //dataType: "json", //json格式,後臺返回的數據爲json格式的。
                    //async: true,
                    success: function (result) {
                        var bar = document.getElementById("bar");
                        bar.style = "width: " + result + "%";
                        $("#bar").width(result + '%');
                        //在進度條Js中新增判斷Js語句,判斷如果後端傳遞回來的數據沒有達到進度條的百分百,
                        // 那麼就禁用提交和驗證按鈕。通過獲取提交按鈕控件的id來對控件進行相應的控制。
                        var btnSubmit = document.getElementById("submit");
                        var btnverification = document.getElementById("verification");
                        if(result<100){
                            btnSubmit.disabled = true;
                            btnverification.disabled = true;
                        }else{
                            btnSubmit.disabled = false;
                            btnverification.disabled = false;
                        }
                        //控制禁用按鈕js語言結束
                        console.log(result)
                    }
                })
            }, 1000)
        }
    </script>

2.導入功能需要對再次確認功能進行優化,目前無論是點擊確認還是取消都會啓動導入功能,非常不便。

        終於解決這個問題了。

<script language="javascript">
function sumbit_sure(){
var gnl=confirm("確定要提交?");
if (gnl==true){
    return true;
}
else{
    return false;
}
}
< /script>
</html>
    <body>
      <form action="2.html" onsubmit="return sumbit_sure()">
      點擊我提交<br>
      <input type="text" name="text" value="text"><br>
      <input type="submit">
      </form>
    </body>
< /html>

        上面代碼是表單,提交確認的必須放在form中設置,之前走了很多彎路,onclick要不得啊。

        網上一大堆說在input 的onclick裏調用的,都是TMD扯淡,害我繞半天!

    4.遇到分頁查詢是會無法精準查詢,查詢會出錯,必須考慮優化方案,目前等待優化處理。

        經過測試,發現可以通過get提交數據的模式來查詢,這樣能解決在分頁查詢時無法保持查詢姓名的問題。但是又發現了新的問題,那就是管理員權限未對未授權訪問的行爲進行處理,比如未授權訪問某個頁面,必須轉到首頁等等。等待處理。。。。。。

        經過測試,發現可以在管理員視圖界面加入登錄驗證,這樣可以避免未登錄用戶訪問管理員界面視圖時出現空白頁面,導致用戶訪問的不友好問題。當登錄後,普通用戶訪問管理員權限的頁面時,會出現404錯誤。本問題解決。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章