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);
}
});
});
以上、よろしくお願い致します。
お礼
ご回答頂きましてありがとうございます。 質問2.ですが、実はdataTypeをhtmlにしてもクロスドメイン通信はできました。 ただ、通信先のPHPがBasic認証しているディレクトリ以下にあり、Basic認証をしているとクロスドメイン通信はできず、Basic認証を外すとクロスドメイン通信ができるという、不可解な状況になりました。 そのためdataTypeをjsonpにしてクロスドメイン通信をしたらBasic認証をしていても通信ができました。しかし質問内容にもありますようにGETの文字数制限で引っかかってしまいました。 やりたいことは ・Basic認証をしているディレクトリ以下のPHPファイルにデータを投げたい ・PHPはjQueryを実行するドメインとは別のドメインです ・データの文字数は数千文字あるのでPOSTで投げたい ・PHPからjQueryが受け取るのはhtmlでもtextでもjsonでも何でもいいです。要はjQueryからPHPに大きめのデータが渡せればいいです これらを実現するために何かおわかりでしたらよろしくお願い致します。