使用href onclick更新div而不重新加載頁面？

Question

我使用這個現有的問題來幫助我： HTML - 更改\\更新頁面內容而不刷新\\重新加載頁面

template-comparison.php文件從header.php代碼中獲取代碼，但未顯示實際的“獲取代碼”。 否則，模板頁面將沒有標題。 templatecode.php文件是用於獲取和顯示數據庫數據的代碼。

我的代碼：

模板comparison.php

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

templatecode.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>

怎么了：

我點擊鏈接。 什么都沒發生。 它就像一個錨點，將我推到頁面頂部。

有任何想法嗎？ 我想要的是點擊鏈接的所有數據（例如：ID 1 ...鏈接文本）顯示在div中。 如果我單擊ID 2（鏈接文本2），則會顯示該ID的數據。

Answer 1

我在下面有一個更長的答案，但你可以做的一件事就是阻止它像錨標簽一樣只是調用event.preventDefault（）; 在你的函數之前的onclick（）：

模板comparison.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：

模板comparison.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);
            }
        });
    });
});

templatecode.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加載它。

Answer 2

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

用。。。來代替：

$sql = "SELECT * FROM PresidentialCandidate WHERE  ID='$ID'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
  $row = $result->fetch_assoc();
  echo $row['ID'];
}

請不要混用mysql_*和mysqli_*函數。

Answer 3

只需從錨鏈接中刪除href，它只會調用該函數，不會重定向到＃

<a onClick="prescand('1')" >link text</a>

Answer 4

如果您使用的是jQuery，則可以避免使用DOM onClick觸發器並使用jQuery事件。 此外，當您在錨點中將主題標簽作為href ，它會在單擊時將主題標簽放在URL中，因為它假定它是元素ID。 您可以將其更改為如下所示，甚至可以省略它：

<a href="javascript:;" class="foo" data-target="1" >link text</a>

現在您可以使用jQuery綁定事件：

$(document).ready(function(){
    $('.foo').on('click', function(e){
        e.preventDefault();
        prescand($(this).data("target"));
    });
});

您也可以使用$('a') jQuery選擇器，但通常您希望更具體一些，並通過將它們與某個類組合在一起來僅定位某些錨點。

加載功能正常。