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);
}
});
});
以上、よろしくお願い致します。
お礼
ご回答ありがとうございます。 ajax周りで画像は使用しておりませんので特に問題はないかと思います。