jQueryからPHPを実行して処理を行う非同期処理

2013/07/11

記事概要

jQuery からサーバーサイドスクリプトを実行

jQuery はクライアント上で動くプログラムです。
そのため、jQuery ではサーバーサイドで行う処理はできません。

サーバーサイドで処理を行いたい場合は、リクエストを送信してサーバーサイドのプログラムを実行し、結果を取得する必要があります。
つまり、画面遷移が必要になる訳です。

しかし、ボタンクリック時に画面遷移せずに、データを取得・表示したいときなどありますよね。
そういった場合は、jQuery から サーバーサイドのプログラムを実行してその結果を取得する非同期処理を行うことで実現することができます。

これを行うには2つの方法があり、1つ目は ajax を使用する方法、2つ目は post を使用する方法です。
post の方が分かりやすいと思うため、今回は post を使用した方法を紹介します。

jQuery.post() でPOST送信

jQuery.post() を使用して、非同期処理をおこないます。

jQuery.post(url, data, callback, type)

引数は最大で上記の4つあり、それぞれ以下を設定します。

url

実行するプログラムファイルのURLを記述します。
パスでも問題ありません。

data

URLで指定したプログラムにPOST送信するデータを指定します。
キーと値の組み合わせとなります。
複数指定する場合は、以下のように 「,」で区切ります。

{ id: site_id, url: site_url }

callback

callback 関数を記述します。

function(data, textStatus) {
if( textStatus == 'success') {
//処理
}
}

data には、プログラムから送られたデータが格納されています。
textStatus には、処理に成功した場合に "success" が格納されています。

type

送信データの形式を指定します。
JSON、XMLなどがあります。

サンプルコード

jQuery の書き方


<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 の書き方


<?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 で返すデータを出力しています。

  • このエントリーをはてなブックマークに追加
Related

LINEと連携したテイクアウト事前注文システム徹底比較!

目次 テイクアウト予約・注文受付システムのトレンド LINEと連携したテイクアウト事前注文システムの価格表 L.B.B.Cloud テイクイーツ ...

PHPで動画の撮影日を取得

PHPで動画の撮影日を取得 概要 PHPからffprobeコマンドを実行し、動画の撮影日時を取得します。 コード $posted_at = ...

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...
トップへ戻る