Ajax・jQueryでGETとPOSTする方法

質問

画像をクリックしたときにjQuery,Ajaxを利用してGET/POSTをしたいです。

POSTとGETは良く使うので今回両方の流れを知りたいと思います。
PHPではPOST、GETは使うことができます。javascript,jQueryはちょっと触ったことのある程度です。

フォームに値を入力してjQueryとAjaxでPOSTでデータを送るのは下記ホームページを参考にしてみたら成功しました。
http://webcake.no003.info/webdesign/jquery-ajax-php-post-sample.html

今回は下記のような複数のパラメータを送信したいと思います。

画像Aをクリックした時にkeyword=aaaa,cate=1
画像Bをクリックした時にkeyword=bbbb,cate=2
画像Cをクリックした時にkeyword=cccc,cate=3

今までPHPでGETを使っていた時のHTML部分です↓
<a href="index.php?keyword=aaaa&cate=1"><img src="images/a.jpg"></a>
<a href="index.php?keyword=bbbb&cate=2"><img src="images/b.jpg"></a>
<a href="index.php?keyword=cccc&cate=3"><img src="images/c.jpg"></a>

「send.phpファイル」
<?php
//POSTでデータが送られた場合
echo $_POST['keyword'].'<br>';
echo $_POST['cate'].'<br>';

//GETでデータが送られた場合
echo $_GET['keyword'].'<br>';
echo $_GET['cate'].'<br>';

?>

==GET================================================================
（HTML部分）
<a href="index.php?keyword=aaaa&cate=1"><img src="images/a.jpg"></a>
の記載方法だと、クリックしたときにアドレスバーにアドレスが入力されるのでページが切り替わってしまいAjaxにならないので違う形にする必要があると思いますがどのようにkeyword,cateのパラメータを持たせればよいのでしょうか？
または、この形のままで良く、リンクした時にページが飛ばないような処理方法があるのでしょうか？（またはAjaxではあまりGETは使わないのでしょうか？）

上記に記載した、POSTの参考例のソースを記載します。
GETの場合にどのように変えたらよいのでしょうか。

$(document).ready(function() {
var data = {request : $('#request').val()};//GETで複数値対応に書き換えが必要。

$.ajax({
type: "GET",
url: "send.php",
data: data,
success: function(data, dataType) {
$( '#test' ) . html( data );
},error: function(XMLHttpRequest, textStatus, errorThrown) {
this;
alert('Error : ' + errorThrown);
}
});
});

==POST================================================================
（HTML部分）
formを使う形になると思いますが、どのような書き方が良いのか教えて下さい。
画像を使うと下記のようになるとは思いますが、A,B,Cそれぞれにkeyword,cateの情報をどのように持たせておいたらよいのかがわかりません。

<form>
<button type="submit" name="" value="*****"><img src="sample.gif"></button>
</form>

（jQuery部分）
$(document).ready(function() {
var data = {request : $('#request').val()};//POSTで複数値対応に書き換えが必要。

$.ajax({
type: "POST",
url: "send.php",
data: data,
success: function(data, dataType) {
$( '#test' ) . html( data );
},error: function(XMLHttpRequest, textStatus, errorThrown) {
this;
alert('Error : ' + errorThrown);
}
});
});

以上、よろしくお願い致します。

回答No.1

LancerVII · ベストアンサー

こんにちは。

特に意識したことが無かったので、的外れな回答だったら申し訳ございません。

HTMLの記述がなんであれ、getでもpostでも通信できますので以下のサンプルをご覧下さい。

==== 動作サンプル
http://hppg.moe.hm/okwave/qa/q7423626/

どちらもHTMLのタグの構成は一緒です。
aタグのhrefからパラメータ部分を取得し、ajaxのパラメータに設定しています。
(jquery.url.jsというプラグインを利用しています)

ほかの方法としては<img src="" data-keyword="aaaa" data-cate="1" />と、独自の属性にて値を準備してあげてJavaScriptにて取得してパラメータに設定してあげる方法もあります。

他にもいろいろあると思います。

お礼

LancerVIIさん

こんにちは。
動作サンプルまで作って頂いて感激です。
ありがとうございます。
作って頂いたサンプルは私が求めていたそのものでした！

jquery.url.jsを使うとパラメータ取得が簡単なんですね。
aタグに設定したパラメータを検索ワードにMySQLのデータを表示させたりしてAjaxを楽しめそうです。