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);
}
});
});
以上、よろしくお願い致します。
お礼
#!/usr/bin/perl print "Content-type: text/html\n"; print "\n"; $counter=0; read(STDIN, $data, $ENV{'CONTENT_LENGTH'}); $counter++; print "$counter<br>\n"; 行の順番を入れ替えたら普通にいけました！ありがとうございます！
補足
変えてみましたけどダメでした。 ただ、HTTPヘッダ付き標準出力にするっていう情報がとっかかりになると思うんで そっちから攻めてみます。ありがとうございます。