☰

HTML - ページを更新/再読み込みせずにページの内容を変更/更新する 質問する

tag-icon • tag-icon php mysql html ajax jquery
HTML - ページを更新/再読み込みせずにページの内容を変更/更新する 質問する

DBからデータを取得してdivに表示します。リンクをクリックするとdivのコンテンツが変更されるようにしたいのです。

1 つのオプションは、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変数の内容がリフレッシュされずに更新されるようにすることです。ユーザーは新しいデータを見ることができるその後、何らかのクエリが実行されると、新しい変数に対して実行されます。

追伸：AJAX が必要になることはわかっていますが、AJAX についてはわかりません。学習できるものを返信してください。私の知識は HTML、PHP、JavaScript、jQuery に限られています。

ベストアンサー1

正しい考えをお持ちなので、次に進めます。onclickハンドラーはクライアント側、つまりブラウザーで実行されるため、PHP 関数を直接呼び出すことはできません。代わりに、(おっしゃるとおり) AJAX を使用して PHP スクリプトを呼び出し、データを取得する JavaScript 関数を追加する必要があります。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'];
  }
?>

おすすめ記事