在 Bootstrap Navbar 中调用 Ajax 请求时不起作用答案

【问题标题】：Ajax request doesn't work when called inside Bootstrap Navbar在 Bootstrap Navbar 中调用 Ajax 请求时不起作用
【发布时间】：2016-10-13 20:45:20
【问题描述】：

所以我正在学习 JS/Ajax，我想尝试通过单击按钮将 html 内容加载到我的页面中。只要我在导航栏之外调用该函数，一切正常，但我不知道为什么？

我正在尝试将“bestellung.html”中的 html 内容加载到 id 为“main-well”的 div 中。一切正常，除非我想从导航栏中调用 ladeBestellung() 函数......内容被加载但立即被覆盖并消失......为什么？？

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>QR2BUY Bestellübersicht</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Eigene Styles -->
    <link href="css/styles.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->

  </head>
  <body>
    <div class="container"><!-- Haupt-Container -->
        <!-- Haupt-Navigationsleiste -->
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header"><!-- Anfang Navigationsleiste-Header -->
                    <!-- Button für die mobile Ansicht -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Navigation aufklappen</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                        <span class="glyphicon glyphicon-qrcode"></span> QR2BUY
                    </a>
                </div><!-- Ende Navigationsleiste-Header -->
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">                        
                        <li><a href="#">Hilfe</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Konto <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Einstellungen</a></li>
                                <li><a href="#">Bestellhistorie</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="index.html">Logout</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-right"><!-- Anfang Suchfeld -->
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Bestell-Nr. eingeben...">
                            <div class="input-group-btn">
                                <button class="btn btn-default" onClick="ladeBestellung()"><i class="glyphicon glyphicon-search"></i></button>
                            </div>
                        </div>                          
                    </form><!-- Ende Suchfeld -->                   
                </div>
            </div>
        </nav><!-- Ende Haupt-Navigationsleiste -->

        <div class="row"><!-- Start Main-Row -->
            <div class="col-xs-12"><!-- Start Main Col -->
                <div class="well" id="main-well">

                </div><!-- Ende Well -->
            </div><!-- Ende Main-Col -->

        </div><!-- Ende Main-Row -->




    </div><!-- Ende Haupt-Container -->


    <footer class="footer"><!-- Anfang Footer -->
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <p class="text-center">
                        <span>&copy; 2016 QR2BUY</span> - <a href="#">Impressum</a> - <a href="#">Kontakt</a>
                        <p>
                        </div>
                    </div>
                </div><!-- Ende Haupt-Container -->

            </footer><!-- Ende Footer -->


            <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <!-- Include all compiled plugins (below), or include individual files as needed -->
            <script src="js/bootstrap.min.js"></script>
            <script>
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4) {
                        document.getElementById('main-well').innerHTML = xhr.responseText;
                    }
                };
                xhr.open('GET', 'bestellung.html');
                function ladeBestellung() {
                    xhr.send();
                }
            </script>
        </body>
        </html>

【问题讨论】：

当您点击该按钮时您的页面是否会重新加载？
您的表单在您单击按钮时提交。您需要分配type="button" 属性以避免这种情况，否则默认情况下它是submit - 检查这个答案 - stackoverflow.com/questions/3314989/…
该死..这正是问题所在..现在看起来很明显但我不会想到它，谢谢！

标签： javascript ajax twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

<button> 的默认类型是“提交”，它会重新加载页面并覆盖 javascript 生成的 html - 所以解决方案是使用 <button type="button"></button>

【讨论】：