画像をクリックしたときに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);
}
});
});
以上、よろしくお願い致します。
お礼
LancerVIIさん こんにちは。 動作サンプルまで作って頂いて感激です。 ありがとうございます。 作って頂いたサンプルは私が求めていたそのものでした！ jquery.url.jsを使うとパラメータ取得が簡単なんですね。 aタグに設定したパラメータを検索ワードにMySQLのデータを表示させたりしてAjaxを楽しめそうです。