「PDOとajaxでリアルタイム検索機能を作る～ajax入門1～」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
https://www.ibm.com/developerworks/jp/opensource/library/os-php-jquery-ajax/ここの記事はmysql_real_escape_stringを使った書き方をしているので、PDOバージョンで書いてみます。まだ完璧なものではないので、流れだけ解釈してもらえればと思います。10月4日記事
~
~
目次
#contents
~
~
----
~
*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 = (string)filter_input(INPUT_POST,'str');
$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を使った例を表示しましたが、一部の単語がうまく検索できませんでした・・・。もう少し勉強します。
~
~
以上
https://www.ibm.com/developerworks/jp/opensource/library/os-php-jquery-ajax/ここの記事はmysql_real_escape_stringを使った書き方をしているので、PDOバージョンで書いてみます。まだ完璧なものではないので、流れだけ解釈してもらえればと思います。10月4日記事
~
~
目次
#contents
~
~
----
~
*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を使った例を表示しましたが、一部の単語がうまく検索できませんでした・・・。もう少し勉強します。
~
~
以上
