マジレス希望

jquery × php × mysql 非同期で、POSTしたものを表示する。

締切済

質問者：PlanetSD
質問日時：2016/06/13 20:02
回答数：1件

javascript とライブラリーのjqueryを学習中ですが、jqueryとphpとmysqlで非同期の掲示板のようなものを作りたいと考えています。(名前とメッセージを入れるという単純なものです)。今、できていないのが、フォームに入力したものを非同期で送信してデータベースに登録して、その後に、登録したデータを出力したいのですが、うまくいきません。既に仮としてデータベースにあらかじめ入れてあるデータの表示一覧は可能なのですが、新規でフォームより投稿して、データベースに登録して、フロントに表示するという処理でつまづいています。こうしたほうがよいというようなアドバイスをお手数をかけますが、よろしくお願いします。

ファイル構成は、 index.html　と message.php になります。データベースのテーブルは、idと name, messageの構成になります。
index.htmlの<script>タグの処理は、画面が読み込まれたときに、一覧を表示する処理と、ボタンのクリックがあったときに、postデータを送信して、成功したら一覧として戻すという処理です。

【index.html】

<!DOCTYPE html><html lang="ja">
<head><meta charset="utf-8" /><title>テスト</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10 …

<script>
$(function(){
$.ajax({
type: "POST",
url: "message.php",
dataType: "json",
success: function(data, dataType){

var $content = $('#info');
for (var i =0; i<data.length; i++){
$content.append("<li>" + data[i].id + "　"+ data[i].name + "　" + data[i].message +"</li>");
}
}
});
});

$('#sending').click(function(){
$.ajax({
type: "POST",
url: "message.php",
dataType: "json",
data: {
s_name: $('#s_nmae').val(),
s_message: $('#s_message').val()
},
success: function(data, dataType){
var $content = $('#info');
for (var i =0; i<data.length; i++){
$content.append("<li>" + data[i].id + "　"+ data[i].name + "　" + data[i].message +"</li>");
}
}
});
return false;
});
</script>

</head>
<body>
<h1>フォーム</h1>
<form method="post">
<input id="s_name" type="text" name="name" size="30" maxlength="20"><br>
<textarea id="s_message" ></textarea><br>
<input id="sending" value="送信" type="submit" /><br>
</form>

<h1>表示</h1>
<ul id="info"></ul>
</body>
</html>

【message.php】

<?php
$dsn = 'mysql:dbname=test;host=localhost;charset=utf8';
$user = 'root';
$password = 'xxxxxxxx';
$pdo = new PDO($dsn, $user, $password);

header("Content-type: text/plain; charset=UTF-8");
if (isset($_POST['s_name'])){
try{
$sql = "INSERT INTO message(name, message) VALUES(?,?)";
$datas=array($_POST['s_name'],$_POST['s_message']);
$stmt = $pdo->prepare( $sql);
$stmt->execute($datas);

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

try{
$sql = "select * from message";
$stmt = $pdo->query($sql);

while ($row = $stmt->fetchObject()){
$all[] = array(
'id'=> $row->message_id
,'name' => $row->name
,'message' => $row->message
);
}
header('Content-Type: application/json');
echo json_encode( $all );
exit;
}
catch (PDOException $e){
die('Error:' . $e->getMessage());
}

?>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

参考程度に

No.1

回答者： fujillin
回答日時：2016/06/14 09:07

こんにちは

とりあえず気が付いたところを・・・

javascriptの部分の構成が以下のようになっていると思いますが、
$(function(){
　$.ajax({
　　～～～
　});
});

$('#sending').click(function(){
　$.ajax({
　　～～～
　});
　return false;
});

後半の$('#sending').click(function(){ ～の実行時点では、まだHTML全体のパースは行われていないので、$('#sending')がnullになっていると思われます。
jQueryオブジェクトではこのような場合もエラーを出さず、以降の処理を無視するようになっていたと思いますので、送信ボタンを押したときのイベントのバインドできていないものと推測します。
処理が動作しているかどうか、alertなどで確認なさってみてください。
（想像するところ通常のsubmitになると思いますので、同じページに遷移していませんか？）

全体を、$(function(){　～　の関数内に納めれば、バインド処理もready後に実行されるはずです。