web-dev-qa-db-ja.com

HTML-ページを更新または再ロードせずにページのコンテンツを変更または更新する

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

1つのオプションは、URLを介してそれ自体にパラメーターを渡し、ページをリロードすることです...

リロードせずにする必要があります\ refreshing ...

<?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変数の内容が更新せずに更新されるリンクのいずれかをクリックすることです。いくつかのクエリが実行され、新しい変数で実行されます

psいくつかのAJAXが必要なのはわかっていますが、AJAXがわかりません。ですから、学べることを教えてください。 JavaScriptとjQuery

phpmysqlhtmlajaxjquery
37
Moon

あなたは正しいアイデアを持っているので、ここで先に進む方法です：onclickハンドラーはクライアント側で、ブラウザーで実行されるため、PHP関数を直接呼び出すことはできません代わりに、（前述したように）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'];
  }
?>
44
casablanca

jQueryが仕事をします。 ajax呼び出しを実行するための一般的な関数であるjQuery.ajax関数、またはデータを取得/投稿するためのラッパーであるjQuery.get、jQuery.postのいずれかを使用できます。非常に使いやすい。たとえば、PHPでjQueryを使用する方法を示す this チュートリアルをご覧ください。

2
Sorantis