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

Posted 2023-02-24

【中文标题】使用 href onclick 更新 div 而不重新加载页面？

【英文标题】：Using a href onclick to update div without reloading page?

【发布时间】：2016-03-20 20:09:16

【问题描述】：

我用这个现有的问题来帮助我：html - Change\Update page contents without refreshing\reloading the page

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>

会发生什么：

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

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

【问题讨论】：

为此使用 ajax。 api.jquery.com/jquery.ajax

为此使用 ajax 调用。

试试这个：<a href="javascript:prescand('1')">link text</a>

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

@guradio 和 Apb：w3schools.com/jquery/jquery_ajax_load.asp

【参考方案1】：

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

【讨论】：

您可能还想显示来自$results = mysql_query(... 的更改。

【参考方案2】：

我在下面有一个更长的答案，但你可以做一件事来防止它像一个锚标签一样只是调用 event.preventDefault();在你的函数之前的 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);
            
        );
    );
);

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 加载它。

【讨论】：

templatecode.php 仍然存在mysqli 与mysql 的主要问题。此外，与 OP 的 `$('#myStyle').load('templatecode.php?id=' + ID);` 相比，$.ajax 代码太过分了。

@Sean，是的，这绝对是真的。如果它更好地暴露过程，我认为让它更冗长一点并不是一件坏事（我知道；我会在这里被其他程序员抨击......但是在像这样简单的事情上它可以更清楚一点不会有什么坏处）。我也会把他的选项放在这里。

@MillerMedia，谢天谢地，您没有接近new XMLHttpRequest(); 来公开该过程。如果OP 确定响应将是html，那么load() 似乎适合我..

@MillerMedia - 不工作。检查我的网站dirtypoliticsph.com/presidential-candidate-comparison

这里发生了一些事情。首先，Javascript 没有运行，因为我认为按照您在模板中设置它的方式，它是在页面上加载 jQuery 之前加载的（您在安慰）。当我在页面加载后运行代码时，jQuery 运行良好，但在 PHP 页面上出现 500 错误。您是否使用上面的确切代码？我显然无法在您的服务器上对其进行测试，但看起来也存在一些小问题。既然我看到了您的网站，我也更新了我的答案...见上文..

【参考方案3】：

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

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

【参考方案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 选择器，但通常您希望更具体一些，通过将它们与某个类组合在一起来仅定位某些锚点。

加载功能正常。