php - ajax に jquery フレームワークを使用する

Question

まず、私の状況を説明させてください。

各フィールドにヘルプ ボタンがあるフォームを作成しようとしています。誰かがヘルプをクリックすると、データベースからデータが取得され、それらが div に表示されます。例えば

<div class="main">
 <div class="form">
   <!-- my form code will be here-->
 </div>

 <div class="help">
   <!-- this div will show some data using ajax. I need to make database query using ID of help then show the data here-->
 </div>

</div><!--end of main-->

今、私はw3学校でajaxについて読んで、そこで解決策を見つけました。それは：

<script>
 function loadXMLDoc(a)
 {
 var xmlhttp;
 var temp = "myname.php?id=" + a;


 if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
         xmlhttp=new XMLHttpRequest();
    }
 else
    {// code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
       xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
             document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
 xmlhttp.open("GET",temp,true);
 xmlhttp.send();
}
</script>



<h2>AJAX</h2>
  <button type="button" onclick="loadXMLDoc('1')">Request 1</button>
    <button type="button" onclick="loadXMLDoc('2')">Request 2</button>
  <button type="button" onclick="loadXMLDoc('3')">Request 3</button>
<div id="myDiv"></div>

ボタンをクリックしてIDをパラメーターとして送信すると、機能します。Google検索を行った後、ajaxにはjQueryフレームワークを使用する方が良いことがわかりました。これについて、Google で初心者向けのチュートリアルを入手できませんでした。

その場合に上記のコードを使用しても問題ない場合は、リンクを提供するか、Javascript でデータベースクエリを作成し、値を取得して Ajax を使用して div に設定する方法を教えてください。

これが Ajax の適切な使用方法でない場合は、Ajax を使用してデータベースから値を取得し、それを特定の div に表示する方法を教えてください。データベースクエリを作成する関数のヘルプ ID を送信する必要があることに注意してください。

ワードプレスのフレームワークを使用しています。

Answer 1

ページに jquery.js を含めると、次のように簡単になります

function loadXMLDoc(a) {
    $('#myDiv').load("myname.php?id=" + a);
}

完全なjqueryソリューションが必要な場合は、jqueryイベント登録も使用することをお勧めします

HTML

<button type="button" class="requester" data-request="1">Request 1</button>
<button type="button" class="requester" data-request="2">Request 2</button>
<button type="button" class="requester" data-request="3"Request 3</button>
<div id="myDiv"></div>

JS

$(function() {
    $('.requester').click(function() {
        $('#myDiv').load("myname.php?id="
                + $(this).data('request'));
    });
});

Answer 2

$.post('myname.php',{id:a},function(data){ $('#myDiv').html(data); });