javascript - 使用 href onclick 更新 div 而无需重新加载页面？

Question

我使用这个现有问题来帮助我:HTML - Change\Update page contents without refreshing\reloading the page

template-comparison.php 文件从 header.php 代码中获取代码，但未显示实际的“获取代码”。否则，模板页面将没有标题。 templatecode.php 文件是用来获取和显示数据库数据的代码。

我的代码:

模板比较.php

    <a href="#" onClick="prescand('1')" >link text</a>
    <a href="#" onClick="prescand('2')" >link text 2</a>
    <div id='myStyle'>
    </div>

模板代码.php

    <?php
    $servername = "localhost";
    $username = "hidden for security purposes";
    $password = "hidden for security purposes";
    $dbname = "hidden for security purposes";

    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    } 

      $ID = $_GET['ID'];
      $results = mysql_query("SELECT * FROM PresidentialCandidate WHERE  ID='$ID'");   
      if( mysql_num_rows($results) > 0 )
      {
       $row = mysql_fetch_array( $results );
       echo $row['ID'];
      }
    ?>

header.php

   <script type="text/javascript">
    function prescand(ID) {
      $('#myStyle').load('templatecode.php?id=' + ID);
    }
    </script>

发生了什么:

我点击链接。什么都没发生。它就像一个 anchor ，将我推到页面顶部。

有什么想法吗？我想要的是将点击链接的数据ALL(例如:ID 1...链接文本)显示在div 中。如果我单击 ID 2(链接文本 2)，则会显示该 ID 的数据。

Answer 1

我在下面有一个更长的答案，但是你可以做的一件事就是调用 event.preventDefault(); 来防止它像 anchor 标记一样工作。在您的函数之前的 onclick() 上:

模板比较.php

<a href="#" onClick="event.preventDefault();prescand('1');" >link text</a>
<a href="#" onClick="event.preventDefault();prescand('2')" >link text 2</a>
<div id="myStyle">
</div>

---

像这样使用 AJAX:

模板比较.php

<a href="#" class="query-link" data-id="1">link text</a>
<a href="#" class="query-link" data-id="2">link text 2</a>
<div id="myStyle">
</div>

header.php

jQuery(document).ready(function(){
    jQuery('a.query-link').on('click', function(e){    
        //Prevent the link from working as an anchor tag
        e.preventDefault();

        //Make AJAX call to the PHP file/database query
        jQuery.ajax({
            url:'{PATH TO FILE}/templatecode.php',
            type:'POST',
            data:{id:jQuery(this).data('id')},
            success:function(data){
                jQuery('#myStyle').append(data);
            }
        });
    });
});

模板代码.php

<?php
$servername = "localhost";
$username = "hidden for security purposes";
$password = "hidden for security purposes";
$dbname = "hidden for security purposes";

// Create connection
$mysqli = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($mysqli->connect_error) {
    die("Connection failed: " . $mysqli->connect_error);
} 

  $ID = $_POST['ID'];
  $results = $mysqli->query("SELECT * FROM PresidentialCandidate WHERE  ID='$ID'");   
  if( $results->num_rows > 0 )
  {
   $row = mysqli_fetch_array($results,MYSQLI_ASSOC);

    //Instead of just echoing out the ID, you need to build the result/data that you want in the div right here. The success function of the AJAX call will append whatever you echo out here
    echo $row['ID'];
  }
?>

顺便说一句，我更新了您的 PHP 代码以正确使用 MySQLI，而不是将 MySQL 与 MySQLi 混合使用。

看到您的站点 (WordPress) 后，您不会想直接将其加载到 header.php 中。其中一个问题是 jQuery 是在该脚本之后加载的，因此它在加载时还没有要使用的 jQuery 变量。您可以尝试将它放在 footer.php 文件中，但“正确”的方法是将它放在外部脚本中，然后使用 functions.php 文件中的 wp_enqueue_script 加载它。