前端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错误。本问题解决。

 

 

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