渡しっ放しじゃないしっかり返ってくるやり方
データベースは
テーブル名：members
カラム
int(10) :member_id
varchar(50) :member_name
です。
member_idで検索して、member_idとmember_nameを表示します。
目的が検索ならリアルタイムにしたいところですが
今回はindex.htmlからsend.phpに何かを送って
send.phpがindex.htmlに結果なりエラーなりを
返すといったところが目的です。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryのAjaxをPHPで使うやつ</title>
</head>
<body>
<h1>jQueryのAjaxをPHPで使うやつ</h1>
<form method="post">
<p><input id="request" size="10" maxlength="10"></p>
<p><input id="send" value="送信" type="submit"></p>
</form>
<div id="XMLHttpRequest"></div><!-- ステータスコード -->
<div id="textStatus"></div><!-- エラー情報 -->
<div id="errorThrown"></div><!-- 例外情報 -->
<div id="result"></div><!-- 返してきたデータを表示 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
//送信ボタンをクリック
$('#send').click(function(){
//POSTメソッドで送るデータを定義する
//var data = {パラメータ : 値};
var data = {request : $('#request').val()};
//Ajax通信メソッド
//type : HTTP通信の種類(POSTとかGETとか)
//url : リクエスト送信先のURL
//data : サーバに送信する値
$.ajax({
type: "POST",
url: "send.php",
data: data,
//Ajax通信が成功した場合に呼び出されるメソッド
success: function(data, dataType){
//デバッグ用 アラートとコンソール
alert(data);
console.log(data);
//出力する部分
$('#result').html(data);
},
//Ajax通信が失敗した場合に呼び出されるメソッド
error: function(XMLHttpRequest, textStatus, errorThrown){
alert('Error : ' + errorThrown);
$("#XMLHttpRequest").html("XMLHttpRequest : " + XMLHttpRequest.status);
$("#textStatus").html("textStatus : " + textStatus);
$("#errorThrown").html("errorThrown : " + errorThrown);
}
});
return false;
});
});
</script>
</body>
</html>
send.php
<?php
/*** データベースに接続するための宣言 ***/
$con = mysqli_connect('ホスト', 'ユーザ', 'パスワード') or die(mysqli_error());
mysqli_set_charset($con, "utf8");
mysqli_select_db($con,'データベース名');
mysqli_query($con,'SET NAMES UTF8');
function hsc($str){
return htmlspecialchars($str, ENT_QUOTES, 'UTF-8');
}
//このページでechoしたものがhtmlに返されて出力される
header("Content-type: text/plain; charset=UTF-8");
//Ajaxによるリクエストかどうかの識別を行う
//strtolower()を付けるのは、XMLHttpRequestやxmlHttpRequestで返ってくる場合があるため
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
if(isset($_POST['request'])){
//member_id(int型)で検索するためint以外を弾く
$request= (int)filter_input(INPUT_POST, 'request');
$sql = sprintf("SELECT * FROM members WHERE member_id LIKE '%s'",
mysqli_real_escape_string($con,'%'.addcslashes(hsc($request), '\_%').'%')
);
$res = mysqli_query($con,$sql);
if(mysqli_num_rows($res) != 0){
while($row = mysqli_fetch_assoc($res)){
$memberId = $row['member_id'];
$memberName = $row['member_name'];
$String .= "<p>".$memberId."</p>";
$String .= "<h3>".$memberName."</h3>";
}
}else{
//デバッグ用 データがなかった時にSQLを出力する
echo $sql;
}
echo $String;
}else{
echo 'The parameter of "request" is not found.';
}
}else{
echo 'This access is not valid.';
}