powerApower 2017-05-16 01:05 采纳率: 23.1%
浏览 1299
已采纳

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条回答 默认 最新

  • show_code 2017-05-17 02:37
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题?

悬赏问题

  • ¥15 计组这些题应该咋做呀
  • ¥60 更换迈创SOL6M4AE卡的时候,驱动要重新装才能使用,怎么解决?
  • ¥15 让node服务器有自动加载文件的功能
  • ¥15 jmeter脚本回放有的是对的有的是错的
  • ¥15 r语言蛋白组学相关问题
  • ¥15 Python时间序列如何拟合疏系数模型
  • ¥15 求学软件的前人们指明方向🥺
  • ¥50 如何增强飞上天的树莓派的热点信号强度,以使得笔记本可以在地面实现远程桌面连接
  • ¥20 双层网络上信息-疾病传播
  • ¥50 paddlepaddle pinn