Question

构建一个数据库应用程序，页面上有一个广播播放器，但是每次我问一个新的数据库查询时，整个页面都会刷新，因此广播停止播放。只有tblData应该被更新。

将其作为JQuery代码，当我单击A按钮时，我将请求查询。

// REQUEST RELOAD DATABASE 
document.getElementById("selAID").addEventListener('click', function(e) {
    console.log("request selection");
     $.get( '/selA0', function( data ) {
         $('#mydatabaseshow').load(document.URL +  '#mydatabaseshow');
      });
 });

结果是整个页面都被加载到div对象“ mydatabaseshow”中，但是我只想刷新数据库表

下面是我的html页面的一部分

<!DOCTYPE html>
<head>
   <!--------Version 1.2 ---------->
   <title>SQL Database </title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

 <style>
        body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}

    #tblData {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 100%;
      padding-right: 12px;
    }

    #tblData td, #tblData th {
      border: 1px solid #ddd;
      padding: 8px;
    }

    #tblData tr:nth-child(even){background-color: #f2f2f2;}

    #tblData tr:hover {background-color: brown; color: white;}

    #tblData th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      background-color: #4CAF50;
      color: white;
    }


</style> 
</head>

   <div class="w3-bar">
      <a id="selAID" href="#" class="w3-bar-item w3-button w3-hover-indigo">A</a>
      <a href="/selB0" class="w3-bar-item w3-button w3-hover-indigo">B</a>
      <a href="/selC0" class="w3-bar-item w3-button w3-hover-indigo">C</a>
   </div>


  <div id="mydatabaseshow" class="w3-container" style="overflow-x:auto;">

    <table id="tblData" style="width:100%">
            <tr>
            <th>IDnr</th>
            <th>TITLE</th>
            <th>YEAR</th>
            <th>JUKEID</th>
            <th>TIME (s)</th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>E</th>
        <th>DATE/TIME</th>
        <th>PLAYED</th>
        <th>REMARKS....</th>
        </tr>

            {% for row in data %}
            <tr>
            {% for d in row %}
                <td>{{ d }}</td>
            {% endfor %}
            </tr>
        {% endfor %}
    </table>

 </div>

<script>

// REQUEST RELOAD DATABASE 
document.getElementById("selAID").addEventListener('click', function(e) {
    console.log("request selection");
     $.get( '/selA0', function( data ) {
         $('#mydatabaseshow').load(document.URL +  '#mydatabaseshow');
      });
 });

</script>
</body>
</html>

仅在查询请求时刷新tblData，而不是整个页面

0 个答案: