使用href onclick更新div而不重新加载页面？

Question

我使用了这个已有的问题来帮助我：HTML - 在不刷新或重新加载页面的情况下更改/更新页面内容 template-comparison.php文件从header.php代码中获取代码，但实际的“获取代码”没有显示。否则，模板页面将没有标题。templatecode.php文件是用于获取和显示数据库数据的代码。

我的代码：

template-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...链接文本）。如果我点击ID 2（链接文本2），则会显示该ID的数据。

- thomas

---

使用ajax来完成这个任务。http://api.jquery.com/jquery.ajax/ - guradio

使用 Ajax 调用实现此功能。 - Apb

尝试使用这个：<a href="javascript:prescand('1')">链接文本</a> - Rayon

我们假设您已经加载了jQuery库？例如：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> - Sean

@guradio 和 Apb：http://www.w3schools.com/jquery/jquery_ajax_load.asp - Dropout

使用Jquery Ajax load() https://www.w3schools.com/jquery/jquery_ajax_load.asp - csandreas1

Answer 1

我下面有一个更详细的答案，但你可以在onclick()之前调用event.preventDefault()来防止它像锚标签一样起作用：

template-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：

在 template-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进行加载。

- MillerMedia

---

@Sean，是的，那绝对是真的。如果更详细地展示过程，我认为让它更冗长并不是什么坏事（我知道；其他程序员可能会批评我...但在像这样简单的事情上，更清晰无妨）。我也会把他的选项修复放在这里。 - MillerMedia

@MillerMedia，感谢上帝您没有使用new XMLHttpRequest();来暴露该过程。如果OP确定响应将是html，那么对我来说load()似乎是合适的。 - Rayon

这里发生了几件事情。首先，Javascript没有运行，因为我认为在您的模板中设置的方式是，在页面加载jQuery之前进行加载（控制台中出现“jQuery未定义”错误）。当我在页面加载后运行代码时，jQuery运行良好，但是然后我在PHP页面上得到500错误。您是否使用了上面的完全相同的代码？显然我无法在您的服务器上测试它，但看起来也存在一些小问题。我现在已经更新了我的答案，因为我看到了您的网站...请参见上文。 - MillerMedia

如果我把jQuery放在页脚，它不是会在所有代码执行完后才运行吗？我现在把它放在页脚了，但它仍然不起作用。 - thomas

我尝试在functions.php文件中使用wp_enqueue_script函数，但它导致我的网站崩溃了：function comparison-js() { wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/comparison-js.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'comparison-js' ); - thomas

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'];
}

Replace with:

$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_*函数。

- Shailesh Katarmal

---

你可能也想展示从 $results = mysql_query(... 的变化。 - Sean

Answer 3

只需从锚链接中删除href，它将仅调用函数而不会重定向到#。

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

- Shakeel Memon

Answer 4

如果你在使用jQuery，你可以避免使用DOM的onClick触发器，而是使用jQuery事件。另外，当你在锚点中使用hashtag作为href时，点击后它会将hashtag放入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 选择器，但通常你想要更具体地定位只有某些锚点的组合，通过将它们分组并赋予特定的类名。

加载函数已经很好了。

- Dropout