| # | First | Last | Handle | 編集 |
|---|---|---|---|---|
| 1 | James | Smith | @james | |
| 2 | John | Williams | @john | |
| 3 | Robert | Brown | @robert | |
| 4 | Michael | Miller | @michael | |
| 5 | William | Taylor | @william |
例えばユーザリストに対して各ユーザごとに送信するデータが異なる場合、onClick()を使用すればいちいち JQuery の on メソッドを記述せずにすみ、全体のコード量を減らすことができます。
onClick() にクリックに対応するタグの ID および送信するデータを指定します。
第３引数を true とした場合は、指定された ID の :hover（マウスオーバー）がクリッカブルになります。
タグの ID がボタンである必要はありません。
レスポンスデータを使ってなんらかの処理をしたい場合はこちら。
サンプルでは各ユーザの行をクリックすると GET でユーザ番号が送信され、鉛筆マークをクリックすると POST でユーザデータを送信するようになっています。
４番目以外のレコードは、hover に true を指定しているため、マウスオーバーでマウスの形状が変わります。
var getAjax = new PRAjax("response.php", "get");
getAjax.onClick("#id_list1", {"no":1}, true);
getAjax.onClick("#id_list2", {"no":2}, true);
getAjax.onClick("#id_list3", {"no":3}, true);
getAjax.onClick("#id_list4", {"no":4});
getAjax.onClick("#id_list5", {"no":5}, true);
var postAjax = new PRAjax("response.php", "post");
postAjax.onClick("#id_icon1", {"no":1, "First":"テスト１", "Last":"テスト１"}, true);
postAjax.onClick("#id_icon2", {"no":2, "First":"テスト１", "Last":"テスト１"}, true);
postAjax.onClick("#id_icon3", {"no":3, "First":"テスト１", "Last":"テスト１"}, true);
postAjax.onClick("#id_icon4", {"no":4, "First":"テスト１", "Last":"テスト１"});
postAjax.onClick("#id_icon5", {"no":5, "First":"テスト１", "Last":"テスト１"}, true);
<tr id="id_list1"> <th scope="row">1 <td>James <td>Smith <td>@james <td><i id="id_icon1" class="bi bi-pencil"> </td>