※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

https://www.ibm.com/developerworks/jp/opensource/library/os-php-jquery-ajax/ここの記事はmysql_real_escape_stringを使った書き方をしているので、PDOバージョンで書いてみます。まだ完璧なものではないので、流れだけ解釈してもらえればと思います。10月4日記事

目次





ajaxとは

IT用語辞典によれば

Ajaxとは、Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行って処理を進めていく対話型Webアプリケーションの実装形態。

と定義されています。Googleマップなどが有名です。一昔前、データを送信して結果を受け取る場合に、submitボタンを押したりして、結果を表示していました。そんな中で、リアルタイムに表示結果がすぐ反映されたら近代的で、なおかつそれがデフォルトになりつつあります。ajaxを使った機能として、「もっと読むボタン」だったり、入力されたフォームにエラーがあればフォームのボタンを押さずに、エラー内容が出力される機能が現在有名です。 そんな中で、まずはajaxを扱ってみようという趣旨のページです。今回、英単語を検索し、その綴りと訳を表示させる内容を作っていきたいと思います。

サンプルコード(英単語を検索する仕組み)

table作成

CREATE TABLE `dictionary` (
`id` INT NOT NULL AUTO_INCREMENT ,
`english` VARCHAR(255) NOT NULL ,
`japanese` VARCHAR(255) NOT NULL ,
PRIMARY KEY (`id`) 
)ENGINE=innoDB DEFAULT CHARSET utf8 collate utf8_unicode_ci;



データ登録

INSERT INTO dictionary(english,japanese) VALUES ('dog','犬');
INSERT INTO dictionary(english,japanese) VALUES ('cat','猫');
INSERT INTO dictionary(english,japanese) VALUES ('dislike','嫌う');
INSERT INTO dictionary(english,japanese) VALUES ('disconnect','接続を切る');
INSERT INTO dictionary(english,japanese) VALUES ('disappear','姿を消す');



index.php

<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type='text/javascript'> 
$(document).ready(function(){ 
$("#search_results").slideUp(); 
    $("#search_button").click(function(e){ 
        e.preventDefault(); 
        ajax_search(); 
    }); 
    $("#search_str").keyup(function(e){ 
        e.preventDefault(); 
        ajax_search(); 
    }); 

});
function ajax_search(){ 
  $("#search_results").show(); 
  var search_val=$("#search_str").val(); 
  $.post("./post.php", {search_str : search_val}, function(data){
   if (data.length>0){ 
     $("#search_results").html(data); 
   } 
  }) 
}
</script>
<meta charset="utf-8">
<title>英単語の検索</title>
</head>
<body>
<h1>英単語を検索</h1> 
<div> 
	<form id="searchform" method="post"> 
	<label for="search_term">英単語あるいは日本語を検索</label> 
	<input type="text" name="search_str" id="search_str" /> 
	<input type="submit" value="search" id="search_button" /> 
	</form>
</div> 
<div id="search_results"></div> 
</body>
</html>



post.php

<?php
require ('config.php');

$dsn = 'mysql:dbname='.DB_NAME.';host='.DB_HOST.';port='.DB_PORT.'';
$user = DB_USER;
$password = DB_PASSWORD;


try{
	$dbh = new PDO($dsn, $user, $password); 
	//$str = $_POST["search_str"];
	$str = (string)filter_input(INPUT_POST,'search_str',FILTER_SANITIZE_FULL_SPECIAL_CHARS);
	$str = '%'.$str.'%';
	
	$sql = "SELECT english,japanese FROM dictionary WHERE english LIKE :str OR japanese LIKE :str order by id asc";
	
	
	$stmt = $dbh->prepare($sql);
	$stmt->bindParam(':str',$str,PDO::PARAM_STR);
	$stmt->execute();
	
	$string = '';
	if($result = $stmt->fetch(PDO::FETCH_ASSOC) != NULL){
		while($result = $stmt->fetch(PDO::FETCH_ASSOC)){
		$string .= '<p>'.$result["english"].$result["japanese"].'</p>';
		}
	}else{
		$string .= '検索語はありません。';
	}
	
	
	echo $string;

}catch(PDOException $e){
	print 'Connection failed:'.$e->getMessage();
	die();
}

?>



まとめ

PDOを使った例を表示しましたが、一部の単語がうまく検索できませんでした・・・。もう少し勉強します。

以上