AjaxでPOST してデータベースに入れて表示

Question

Ajaxを使わず普通にPOSTしてデータベースにインサート、セレクトで表示はできています。
それを非同期通信でやりたいのですがエラーが出てしまってますが、どこが間違っているかわかりません。。。
SyntaxError: Unexpected token < in JSON at position 23　とででます、、、

ajax.jsの書き方がいまいち分からず、検索コピーしたのを編集しました。。
ajax.jsが間違っていますか？？

Ajaxを使うにあたって、index000.php　の書き方も変えないといけないのでしょうか？？

index.php

<p>
 <input type="text" name="name">
 内容
  <textarea type="text" name="text"></textarea>
<button id="send">送信</button></p>
  <div id="return"></div>
<script type="text/javascript" src="ajax.js"></script>

ajax.js

 $(function(){
    $("#send").on("click", function(event){
      $.ajax({
        type: "POST",
        url: "index000.php",
        data: { 
		    "name" : $('name').val(),
             "text" : $('text').val()
				},
        dataType : "json"
      }).done(function(data){
        $("#return").append('<p>'+data.name+' : '+data.text+'</p>');
      }).fail(function(XMLHttpRequest, status, e){
        alert(e);
      });
    });
  });

index000.php

     <?php
    if(isset($_POST['name'])) {
		
        
$my_nam=htmlspecialchars($_POST["name"], ENT_QUOTES);//名前を$my_namに代入
$my_mes=htmlspecialchars($_POST["text"], ENT_QUOTES);//メッセージを$my_mesに代入
$dsn= "mysql:host=localhost;dbname=chat;charset=utf8"; 
$user="root";
$pass="";

 
    try{
        
$db = new PDO($dsn,$user,$pass);
$db->query("INSERT INTO chat(ban,name,text,dat)
            VALUES (NULL,'$my_nam','$my_mes',NOW())");
               //SQL文で'chat-tb'テーブルに番号・名前・メッセージ・日付の内容を取得して保存していく
        }catch (Exception $e) {
  echo $e->getMessage() . PHP_EOL;
}
              
header("Location: {$_SERVER['PHP_SELF']}");
exit;
    
	
    }
	
	
?>
   <?php  
$dsn= "mysql:host=localhost;dbname=chat;charset=utf8"; 
$user="root";
$pass="";
$db = new PDO($dsn,$user,$pass);
$ps = $db->query("SELECT * FROM chat ORDER BY ban ASC");
### ヘディングのテキスト
        
   while($r = $ps->fetch()){
?>       
   
 <div class="con">       
<h4>
    <?php print "{$r['name']}";?>：
    <?php  print nl2br($r['text']); ?>
 </h4>   
    </div>
    <?php }
            
        }catch(Exception $e){
          echo $e->getMessage() . PHP_EOL;
      }
      ?>

Answer 1

ajax以前にphp側に問題が山積していますね

• $my_namなどpostデータをhtmlspeciacharsしてはいけません
• VALUES (NULL,'$my_nam','$my_mes',NOW())")

のようなqueryに変数を直接指定してはいけません

• PDOはエラーモードを指定してcatchは

catch(PDOException $e)で受けないといけません

• $_SERVER['PHP_SELF']はつかってはいけません
• APIはHTMLを返すのは微妙です
• DBから受け取った値はhtmlspecialcharsしないといけません

Comments

[ayuayuayu]

ありがとうございます。
時間をかけながら一つずつやってみます。。。

Answer 2

dataTypeでjsonを求めてるのにレスポンスはhtml形式の文字列になってますね。
json形式の文字列にしてください。
※ただ、これは実行結果を返されたJavascriptと画面でどう扱いたいかなのでdataTypeもそれでいいのかは要検討

いずれにしてもリクエスト先の出力が全て返ってくるので、実装もそのあたりを意識してください。「画面」で考えてはいけません。

Comments

[ayuayuayu]

なるほど。。。
やってみます。

[m.ts10806]

それにPHPタグ外は全部出力になるので、気をつけてくださいね。
特に画面表示伴わない機能で、レスポンス形式が決まっている場合は不正な出力となりえます。

[ayuayuayu]

質問です。。
試しに、dataTypeをHTMLにしてみたら、undefined : undefined　と表示されました。
これは、 $("#return").append('<p>'+data.name+' : '+data.text+'</p>');　ここの部分ですよね。
それを、index000.phpにある <?php print "{$r['name']}";?>：
<?php print nl2br($r['text']); ?>で表示したいのですが、不可能ですか、、？

[m.ts10806]

レスポンスがjsonではないので、
data.名称
のようなオブジェクトではないですよね。
html文字列で返すなら返却値はそのまま全部文字列になっています。
いずれにしても返却値dataの内容をデバッグで確認してください。

[ayuayuayu]

ありがとうございます。
ですが理解が追い付かずです、、
時間をかけてやってみます！

[m.ts10806]

まず概念をおさえたほうが良いです。
https://qiita.com/hisamura333/items/e3ea6ae549eb09b7efb9
コードだけで出来上がるものではないですし、
せめてフローチャートレベルくらいは書いたほうがいいです。