javascript jquery加载异常
 <!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
        <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
        <script type="text/javascript" src="../bootstrap/js/bootstrap-datetimepicker.js"></script>
        <script type="text/javascript" src="../bootstrap/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

        <script type="text/javascript" src="../js/jquery.cookie.js"></script>
        <script type="text/javascript" src="../js/pages/main.js"></script>


        <link rel="stylesheet" href="../bootstrap/css/bootstrap-datetimepicker.css">
        <link rel="stylesheet" href="../style/main.css">


        <!-- 支持屏幕 -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <style>
            *{
                font-family:"微软雅黑";
            }
            .form_datetime{
                position:relative;
                z-index:9999;
            }
        </style>
        <script type="text/javascript">
            $(function(){

                //分页显示

                //上一页
                var n=0;
                list(n);
                $("#pageup").click(function(){
                    n=n-10;
                    if(n<0){
                        n=0;
                    }
                    $("#table_content").empty();
                    list(n);
                });

                $("#page_1").click(function(){
                    n=0;
                    $("#table_content").empty();
                    list(n);
                });
                $("#page_2").click(function(){
                    n=10;
                    $("#table_content").empty();
                    list(n);
                });
                $("#page_3").click(function(){
                    n=20;
                    $("#table_content").empty();
                    list(n);
                });
                $("#page_4").click(function(){
                    n=30;
                    $("#table_content").empty();
                    list(n);
                });
                $("#page_5").click(function(){
                    n=40;
                    $("#table_content").empty();
                    list(n);
                });

                $("#pagedown").click(function(){
                    n=n+10;
                    $("#table_content").empty();
                    list(n);
                });




                //新增

                $("#btn_new_save").click(function(){
                    var info_type=$("#iframe_new").contents().find("#info_type").val();//信息类别
                    alert(info_type);
                    var type=$("#iframe_new").contents().find("#type").val();//产品类别
                    var type=$("#iframe_new").contents().find("#type").val();//类型
                    var release1=$("#iframe_new").contents().find("#release1").val();//发布时间
                    var effective_s=$("#iframe_new").contents().find("#effective_s").val();//开始时间
                    var effective_o=$("#iframe_new").contents().find("#effective_o").val();//结束时间
                    var compete=$("#iframe_new").contents().find("#compete").val();//竞争对手
                    var region=$("#iframe_new").contents().find("#region").val();//地区
                    var product=$("#iframe_new").contents().find("#product").val();//产品
                    var source=$("#iframe_new").contents().find("#source").val();//信息来源
                    var content=$("#iframe_new").contents().find("#content").val();//主要内容
                    var impact=$("#iframe_new").contents().find("#impact").val();//影响

                    $.ajax({
                        url:"http://localhost:8080/analysis/info/insertall.do",
                        type:"post",
                        data:{"info_type":info_type,"type":type,"release1":release1,"effective_s":effective_s,"effective_o":effective_o,
                        "compete":compete,"region":region,"product":product,"source":source,"content":content,"impact":impact
                        },
                        resultType:"json",
                        success:function(result){

                            window.location.href="main.html";
                        }





                    });



                });

                //删除
                $("#btn_delete").click(function(){
                    $("input:checkbox[name='checkbox']:checked").each(function(){
                        id=$(this).val();


                        $.ajax({
                            url:"http://localhost:8080/analysis/info/deleteonebyid.do",
                            type:"post",
                            data:{"id":id},
                            resultType:"json",
                            success:function(){
                                window.location.href="main.html";
                            }
                        });

                    });

                });


                //修改
                $("#modify_btn").click(function(){

                    var a=0;

                    $("input:checkbox[name='checkbox']:checked").each(function(){
                        a=a+1;
                        id=$(this).val();

                         if(a==1){
                             $.cookie("id",id);

                         }else{
                            alert("请取消多选");
                            window.location.href="main.html";
                         }


                    });


                    var modify2="<iframe class='embed-responsive-item' src='main/modify.html' id='iframe_modify' name='iframe_modify'></iframe>";
                    var $modify2=$(modify2);
                    $("#modify_1").append($modify2);

                    $("#btn_modify_save").click(function(){
                        var info_type=$("#iframe_modify").contents().find("#info_type").val();//信息类别
                        var type=$("#iframe_modify").contents().find("#type").val();//产品类别
                        var release1=$("#iframe_modify").contents().find("#release1").val();//发布时间
                        var effective_s=$("#iframe_modify").contents().find("#effective_s").val();//开始时间
                        var effective_o=$("#iframe_modify").contents().find("#effective_o").val();//结束时间
                        var compete=$("#iframe_modify").contents().find("#compete").val();//竞争对手
                        var region=$("#iframe_modify").contents().find("#region").val();//地区
                        var product=$("#iframe_modify").contents().find("#product").val();//产品
                        var source=$("#iframe_modify").contents().find("#source").val();//信息来源
                        var content=$("#iframe_modify").contents().find("#content").val();//主要内容
                        var impact=$("#iframe_modify").contents().find("#impact").val();//影响



                    $.ajax({
                        url:"http://localhost:8080/analysis/info/updatebyid.do",
                        type:"post",
                        data:{"id":id,"info_type":info_type,"type":type,"release1":release1,"effective_s":effective_s,"effective_o":effective_o,
                        "compete":compete,"region":region,"product":product,"source":source,"content":content,"impact":impact
                        },
                        resultType:"json",
                        success:function(result){

                            window.location.href="main.html";


                        }





                    });



                });





                });



                //查询
                $("#search-btn").click(function(){
                    var selectdata=$("#selectdata").val();//查询下拉选数据
                    var cont=$("#textdata").val();
                    $.cookie("selectdata",selectdata);
                    $.cookie("cont",cont);

                    $(".right").empty();
                    var ifra="<div class='embed-responsive embed-responsive-16by9'>";
                        ifra+="<iframe class='embed-responsive-item' src='main/search.html'></iframe>";
                        ifra+="</div>";

                    var $ifra=$(ifra);
                    $(".right").append($ifra);






                });


            });

        </script>
        <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    </head>
    <body>

            <!-- top -->
            <div class="row">
                <div class="col-md-12" style="height:50px;">
                    <img src="../image/logo.gif" class="img-responsive" alt="Responsive image" id="logo">
                </div>
            </div>


            <div class="row">
                <!-- left -->
                <div class="left">
                    <img src="../image/User.png" class="img-responsive center-block" alt="Responsive image">

                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="glyphicon glyphicon-th-large"></span>
                                情报信息
                            <span class="caret"></span>
                       </button>
                       <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                       </ul>
                    </div>


                </div>

                <!-- right -->

                <div class="right" id="right2">
                    <div id="info">
                        <ol class="breadcrumb">
                            <span class="glyphicon glyphicon-home"></span>
                            <li><a href="#">情报信息</a></li>
                            <li><a href="#" class="active">信息汇总</a></li>
                        </ol>
                    </div>

                    <div id="function_a">
                        <!-- new delete modify -->
                        <div class="btn-group" role="group" aria-label="...">

                          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#new" id="new_btn">

                                <span class="glyphicon glyphicon-pencil"></span>
                                新建
                          </button>

                          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modify" id="modify_btn">
                                <span class="glyphicon glyphicon-file"></span>
                                            修改
                          </button>

                          <button type="button" class="btn btn-default" id="btn_delete">
                                 <span class="glyphicon glyphicon-trash"></span>
                                 删除
                          </button>
                        </div>  

                        <!-- 搜索 -->
                        <form class="form-inline pull-right">
                            <div class="form-group">
                                <select class="form-control" id="selectdata">
                                    <option value="1">模糊查询</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                </select>
                             </div>


                            <div class="form-group">
                                    <input type="text" class="form-control" placeholder="请输入内容" id="textdata">
                            </div>
                            <button type="submit" class="btn btn-default" id="search-btn">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </form>



                        <!-- 动态具体内容 -->

                        <div id="table_content">


                        </div>




                        <!-- 分页 -->
                        <nav aria-label="Page navigation" id="table_content2">
                              <ul class="pagination ">
                                <li>
                                  <a href="#" aria-label="Previous" id="pageup">
                                    <span aria-hidden="true">&laquo;</span>
                                  </a>
                                </li>
                                <li><a href="#" id="page_1">1</a></li>
                                <li><a href="#" id="page_2">2</a></li>
                                <li><a href="#" id="page_3">3</a></li>
                                <li><a href="#" id="page_4">4</a></li>
                                <li><a href="#" id="page_5">5</a></li>
                                <li>
                                  <a href="#" aria-label="Next" id="pagedown">
                                    <span aria-hidden="true">&raquo;</span>
                                  </a>
                                </li>
                              </ul>
                        </nav>




                        <!-- 模态框绑定数据 -->
                        <!-- 新建 -->
                        <div class="modal fade" id="new" tabindex="-1" role="dialog" aria-labelledby="newLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-lable="Close">
                                            <span aria-hidden="true">&times;</span>

                                        </button>
                                        <h4 class="modal-title" id="newLabel">新建</h4>
                                    </div>

                                    <div class="modal-body" id="new_body">
                                        <div class="embed-responsive embed-responsive-4by3">
                                            <iframe class="embed-responsive-item" src="main/new.html" id="iframe_new" name="iframe_new"></iframe>
                                        </div>
                                    </div>

                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                        <button type="button" class="btn btn-primary" id="btn_new_save">保存</button>
                                    </div>

                                </div>
                        </div>

                        </div>

                        <!-- 修改 -->
                        <div class="modal fade" id="modify" tabindex="-1" role="dialog" aria-labelledby="modifyLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">
                                        &times;</span></button>
                                        <h4 class="modal-title" id="modifyLabel">修改</h4>

                                    </div>
                                    <div class="modal-body">
                                        <div class="embed-responsive embed-responsive-4by3" id="modify_1">

                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                        <button type="button" class="btn btn-primary" id="btn_modify_save">保存</button>
                                    </div>

                                </div>
                            </div>

                        </div>










                    </div>


                </div>

            </div>




    </body>
</html>
    当我点击第二部分的search-btn2按钮后,浏览器又重新加载了第一部分,求大神帮忙解决,把js放在页面最后也是同样的效果。

5个回答

看你这代码不想说什么了,我知道问题了,如下:
search-btn2我没看到,我只看到search-btn这个按钮了,因为你这个按钮是submit类型,而且又放在form表单里面,所以导致页面刷新了,
懂了吗,把button的类型改一下就好了,别用submit类型,要想异步的话form标签也别要了,就说这么多

search-btn2是什么容器,如果是a并且设置了空的href会刷新当前页面,按照你的描述肯定是这样了,去掉href或者变为死连接

 <a href=""
===>
<a href="#"
powerApower
powerApower 代码已经全部上传,请看一下,没有a标签,但是浏览器重新刷新了
2 年多之前 回复

一看你就是新手,你贴完问题了这代码你自己看着不费劲吗?还想找人帮忙你就态度就太有问题了!!
你这是要做个无刷新分页功能吧,5页你就绑定了5次点击,要是有100页你不得绑定100次?
改成用class绑定事件试试吧,然后给每个按钮一个data-index属性,知道当前要加载那一页,一个方法就搞定了

再来回答你的问题,你说点击search-btn2后浏览器加载了,那你看看是不是浏览器刷新了,你的search-btn2用的是不是a标签?如果是的话要在href属性
上加上"javascript:;",这样就屏蔽了默认跳转刷新的事件,还有,你一直用alert不累吗?改用console.log()试试看吧

powerApower
powerApower 出问题在//查询部分 点击search-btn2
2 年多之前 回复
powerApower
powerApower 回复show_code: 没有a标签
2 年多之前 回复
playboyanta123
show_code 回复jumprn: 不是老司机我会回答他的问题?新手不懂不要紧,但是一定要将就规范,态度要端正
2 年多之前 回复
jumprn
孩子不是海子 一看就知道你是老司机
2 年多之前 回复

你应该把代码插入代码片的,这样看特费劲

代码已经全部上传,请看一下,没有a标签,但是浏览器重新刷新了

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问