jQuery はクライアント上で動くプログラムです。
そのため、jQuery ではサーバーサイドで行う処理はできません。
サーバーサイドで処理を行いたい場合は、リクエストを送信してサーバーサイドのプログラムを実行し、結果を取得する必要があります。
つまり、画面遷移が必要になる訳です。
しかし、ボタンクリック時に画面遷移せずに、データを取得・表示したいときなどありますよね。
そういった場合は、jQuery から サーバーサイドのプログラムを実行してその結果を取得する非同期処理を行うことで実現することができます。
これを行うには2つの方法があり、1つ目は ajax を使用する方法、2つ目は post を使用する方法です。
post の方が分かりやすいと思うため、今回は post を使用した方法を紹介します。
jQuery.post() を使用して、非同期処理をおこないます。
jQuery.post(url, data, callback, type)
引数は最大で上記の4つあり、それぞれ以下を設定します。
実行するプログラムファイルのURLを記述します。
パスでも問題ありません。
URLで指定したプログラムにPOST送信するデータを指定します。
キーと値の組み合わせとなります。
複数指定する場合は、以下のように 「,」で区切ります。
{ id: site_id, url: site_url }
callback 関数を記述します。
function(data, textStatus) {
if( textStatus == 'success') {
//処理
}
}
data には、プログラムから送られたデータが格納されています。
textStatus には、処理に成功した場合に "success" が格納されています。
送信データの形式を指定します。
JSON、XMLなどがあります。
<script type="text/javascript">
<!--
var site_id1 = "1";
var site_url1 = "http://www.google.co.jp/";
$(function () {
$.post("get_site_title.php",
{ id: site_id1, url: site_url1 },
function(data, textStatus) {
if( textStatus == 'success') {
$('#site_title' + data['id']).html(data['title']);
}
}
,'json'
);
});
-->
</script>
上記では、サイトのURLをプログラムに渡して、取得した値を #site_title1 に表示しています。
site_id もプログラムに渡していますが、特に意味はありません。
複数のデータを引き渡せるよって意味で記述しているだけです。
<?php
$id = $_POST['id'];
$url = $_POST['url'];
$buff=join(@file($url));
$encode = mb_detect_encoding($buff, 'eucjp-win, UTF-8, sjis-win');
$buff = mb_convert_encoding($buff, 'UTF-8', $encode);
preg_match('/<title>(.*?)<\/title>/is',$buff,$title);
$json['id'] = print_r($id,true);
$json['title'] = print_r($title[1],true);
echo json_encode($json);
?>
URL から タイトルを取得して返しています。
jQuery.post() は、html通信でページを読込むため、echo で返すデータを出力しています。