Question

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

template-comparison.php文件从header.php代码中获取代码，但实际的＆＃34;获取代码＆＃34;没有显示。否则，模板页面将没有标题。 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>

会发生什么：

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

有什么想法吗？我想要的是点击链接的数据的 ALL （例如：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'];
  }
?>

BTW，我更新了你的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_*＆amp; mysqli_*函数。

Answer 3

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

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

Answer 4

如果您使用的是jQuery，则可以避免使用DOM <div class="contenedor canales"> <div class="thumb"> <a href="Accion.html"> <img title="Accion" src="img/thumbs/megamovieshd.jpg" alt=""/> </a> <h4 class="txt-oculto"> <a title="Accion" href="Accion.html">Accion</a> </h4> </div> <div class="thumb"> <a href="Bob-Esponja.html"> <img title="Bob Esponja" src="img/thumbs/mega_bobesponja.jpg" alt=""/> </a> <h4 class="txt-oculto"> <a title="Bob Esponja" href="Bob-Esponja.html">Bob Esponja</a> </h4> </div> <div class="thumb"> <a href="Caballeros-Del-Zodiaco.html"> <img title="Caballeros Del Zodiaco" src="img/thumbs/mega_bot.jpg" alt=""/> </a> <h4 class="txt-oculto"> <a title="Caballeros Del Zodiaco" href="Caballeros-Del-Zodiaco.html">Caballeros Del Zodiaco</a> </h4> </div> <div class="thumb"> <a href="Disney-Pixar.html"> <img title="Disney & Pixar" src="img/thumbs/mega_kids.jpg" alt=""/> </a> <h4 class="txt-oculto"> <a title="Disney & Pixar" href="Disney-Pixar.html">Disney & Pixar</a> </h4> </div> <div class="thumb"> <a href="Dragon-Ball-Z-GT.html"> <img title="Dragon Ball Z & GT" src="img/thumbs/mega_animes.jpg" alt=""/> </a> <h4 class="txt-oculto"> <a title="Dragon Ball Z & GT" href="Dragon-Ball-Z-GT.html">Dragon Ball Z & GT</a> </h4> </div> <div class="thumb"> <a href="Drama-y-Romance.html"> <img title="Drama Y Romance" src="img/thumbs/mega_movieshd.jpg" alt=""/> </a> <h4 class="txt-oculto"> <a title="Drama & Romance" href="Drama-y-Romance.html">Drama & Romance</a> </h4> </div> <div class="thumb"> <a href="El-Chavo-Del-8.html"> <img title="El Chavo Del 8" src="img/thumbs/mega_chavo.jpg" alt=""/> </a> <h4 class="txt-oculto"> <a title="El Chavo Del 8" href="El-Chavo-Del-8.html">El Chavo Del 8</a> </h4> </div> <div class="thumb"> <a href="Familia-Peluche.html"> <img title="Familia Peluche" src="img/thumbs/mega_familia.jpg" alt=""/> </a> <h4 class="txt-oculto"> <a title="Familia Peluche" href="Familia-Peluche.html">Familia Peluche</a> </h4> </div> <div class="thumb"> <a href="Los-Simpson.html"> <img title="Simpson" src="img/thumbs/mega_simpson.jpg" alt=""/> </a> <h4 class="txt-oculto"> <a title="Simpson" href="Los-Simpson.html">Los Simpson</a> </h4> </div> <div class="thumb"> <a href="Malcolm.html"> <img title="Malcolm" src="img/thumbs/megamalcolm.jpg" alt=""/> </a> <h4 class="txt-oculto"> <a title="Malcolm" href="Malcolm.html">Malcolm</a> </h4> </div> <div class="thumb"> <a href="Pokemon.html"> <img title="Pokemon" src="img/thumbs/mega_animeshd.jpg" alt=""/> </a> <h4 class="txt-oculto"> <a title="Pokemon" href="Pokemon.html">Pokemon</a> </h4> </div> <div class="thumb"> <a href="SouthPark.html"> <img title="SouthPark" src="img/thumbs/mega_revolucionhd.jpg" alt=""/> </a> <h4 class="txt-oculto"> <a title="SouthPark" href="SouthPark.html">SouthPark</a> </h4> </div> <div class="thumb"> <a href="Terror.html"> <img title="Terror" src="img/thumbs/mega_extremo.jpg" alt=""/> </a> <h4 class="txt-oculto"> <a title="Terror" href="Terror.html">Terror</a> </h4> </div> <div class="thumb"> <a href="Vecinos.html"> <img title="Vecinos" src="img/thumbs/mega_vecinos.jpg" alt=""/> </a> <h4 class="txt-oculto"> <a title="Vecinos" href="Vecinos.html">Vecinos</a> </h4> </div> </div>触发器并使用jQuery事件。此外，当你的锚点中有一个＃{1}}标签时，它会在点击时将标签放在URL中，因为它假定它是一个元素ID。您可以将其更改为如下所示，或者甚至省略它：

onClick

现在您可以使用jQuery绑定事件：

href

您也可以使用<a href="javascript:;" class="foo" data-target="1" >link text</a> jQuery选择器，但通常您希望更具体一些，并通过将它们与某个类组合在一起来定位某些锚点。

加载功能正常。

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

4 个答案: