Использование href onclick для обновления div без перезагрузки страницы?

У меня есть более длинный ответ ниже, но одна вещь, которую вы можете сделать, чтобы помешать ей действовать как привязанный тег, – это просто вызвать 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, но «правильный» способ сделать это – поместить его во внешний скрипт, а затем загрузить его с помощью wp_enqueue_script в файл functions.php.

 $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_* .

просто удалите href из привязки и он просто вызовет функцию и не перенаправит на #

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

Если вы используете jQuery, вы можете избежать триггеров DOM onClick и вместо этого использовать события jQuery. Также, когда у вас есть hashtag как href в ваших якорях, он помещает хэштег в URL-адрес при нажатии, потому что он предполагает, что это идентификатор элемента. Вы можете изменить это, как показано ниже, или даже опустить его:

 <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")); }); }); 

Вы также можете использовать селектор jQuery $('a') , но обычно вы хотите быть более конкретным и настраивать только определенные привязки, группируя их вместе с определенным классом.

Функция загрузки в порядке, как есть.