HTML - изменить \ обновить содержимое страницы без обновления \ перезагрузки страницы

Question

Я получаю данные из БД и отображаю их в div ... что я хочу сделать, это когда я нажимаю на ссылку, это должно изменить содержимое div

один из вариантов - передать параметр через URL-адрес самому себе и перезагрузить страницу ...

Мне нужно это сделать без перезагрузки \ обновления ...

<?php   
    $id   = '1';

    function recp( $rId ) {
        $id   = $rId;
    }
?>

<a href="#" onClick="<?php recp('1') ?>" > One   </a>
<a href="#" onClick="<?php recp('2') ?>" > Two   </a>
<a href="#" onClick="<?php recp('3') ?>" > Three </a>

<div id='myStyle'>
<?php
    require ('myConnect.php');     
    $results = mysql_query("SELECT para FROM content WHERE  para_ID='$id'");

    if( mysql_num_rows($results) > 0 ) {
        $row = mysql_fetch_array( $results );
        echo $row['para'];
    }
?>
</div>

Цель состоит в том, чтобы при нажатии на любую из ссылок содержимое переменных div и php \ s обновлялось без обновления .... чтобы пользователь мог видеть новые данные и после этого, если какой-либо запрос выполняется на новой переменной \ s

ps Я знаю, что для этого потребуется AJAX, но я не знаю AJAX ... поэтому, пожалуйста, ответьте что-нибудь, чему я могу научиться ... мои знания ограничены HTML, PHP, некоторым JavaScript и некоторым jQuery

Answer 1

У вас есть правильная идея, поэтому вот как это сделать: обработчики onclick запускаются на стороне клиента, в браузере, поэтому вы не можете напрямую вызывать функцию PHP.Вместо этого вам нужно добавить функцию JavaScript, которая (как вы упомянули) использует AJAX для вызова PHP-скрипта и получения данных.Используя jQuery, вы можете сделать что-то вроде этого:

<script type="text/javascript">
function recp(id) {
  $('#myStyle').load('data.php?id=' + id);
}
</script>

<a href="#" onClick="recp('1')" > One   </a>
<a href="#" onClick="recp('2')" > Two   </a>
<a href="#" onClick="recp('3')" > Three </a>

<div id='myStyle'>
</div>

Затем вы поместите ваш PHP-код в отдельный файл: (я назвал его data.php в приведенном выше примере)

<?php
  require ('myConnect.php');     
  $id = $_GET['id'];
  $results = mysql_query("SELECT para FROM content WHERE  para_ID='$id'");   
  if( mysql_num_rows($results) > 0 )
  {
   $row = mysql_fetch_array( $results );
   echo $row['para'];
  }
?>

Answer 2

JQuery сделает работу.Вы можете использовать либо функцию jQuery.ajax, которая является общей для выполнения вызовов ajax, либо ее обертки: jQuery.get, jQuery.post для получения / публикации данных.Его очень просто использовать, например, посмотрите это учебное пособие, в котором показано, как использовать jQuery с PHP.