Q&A
回答ありがとうございます。
上記3点を試してみましたが、いずれも同様に
SyntaxError: Unexpected token < in JSON at position 0
のエラーが出てしまいました。
解決済み追記
みなさま回答ありがとうございました!!
.ajax内のurl指定が間違えていました。
フォルダ構成も同じでやっていたので合っているものと思い込んでいました。
たくさんのアドバイスありがとうございました！！
m(_ _)m
現状
フォーム画面に3つ入力欄があり、そこに入力したテキストがデータベースへ登録され、削除、編集ができるプログラムのテストをしています。
フォーム外観
index.phpファイル
php
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>サンプルテンプレート</title> 6 <meta name="description" content="サンプルテンプレート"> 7 <meta name="keywords" content="レストラン,フレンチ,原宿"> 8 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 9 <link href="css/reset.css" rel="stylesheet" type="text/css"> 10 <script type="text/javascript" src="js/jquery.js"></script> 11</head> 12<body> 13 14 15<?php 16 require_once "functions/db.php"; 17 18 //URLパラメータを取得します。 19 //URLの後ろに?edit=123のような感じでつくのがURLパラメータです。 20 $editId = $_GET["edit"]; 21 //このパラメータをphpで取得することができます。 22 //urlを通じて編集するデータのidを受け取ります。 23 24 //受け取ったidに一致するデータをデータベースから呼び出して、、、 25 $userdataEdit = "select * from userdata where id = '".$editId."' order by id DESC"; 26 $userdataEdit = mysqli_query($mysqli,$userdataEdit); 27 28 //もしデータが存在していたら、変数に格納します。 29 while ($userdataEditArray = mysqli_fetch_assoc($userdataEdit)) { 30 $name = $userdataEditArray["name"]; 31 $age = $userdataEditArray["age"]; 32 $skill = $userdataEditArray["skill"]; 33 }; 34 35 //データの数を数えます。 36 //もしデータが存在していれば1になります。 37 //この変数は後で使います。 38 $userCount = $userdataEdit->num_rows; 39 40 //もし、フォームから投稿された(POSTされた)場合、、 41 if ($_SERVER['REQUEST_METHOD'] === 'POST') { 42 43 //投稿されたデータを受け取ります。 44 $name = htmlspecialchars($_POST['name'], ENT_QUOTES); 45 $age = htmlspecialchars($_POST['age'], ENT_QUOTES); 46 $skill = htmlspecialchars($_POST['skill'], ENT_QUOTES); 47 48 //ここで、データの数をカウントした$userCountを使います。 49 //もしデータがデータベースの中に存在したら(数が0じゃなければ)、、、 50 if($userCount !== 0){ 51 //$editIdに一致したデータに上書きします。 52 $result = mysqli_query($mysqli,"update userdata set name = '".$name."',age = '".$age."',skill = '".$skill."' where id = '".$editId."'"); 53 }elseif (!empty($name)||!empty($age)||!empty($skill)){ 54 //もしデータが0だったら新規で追加します。 55 $result = mysqli_query($mysqli,"insert into userdata(name,age,skill) VALUES('$name','$age','$skill')"); 56 }; 57 58 }; 59 60?> 61 62<!--パラメータをつけたURLだと編集画面になるため、パラメータ無しのURLがそのまま新規追加--> 63<div style="padding-bottom:15px;"> 64 <a href="http://サーバー名/index.php/">新規追加</a> 65</div> 66 67<h1>登録フォーム</h1> 68<form method="post" action=""> 69 <!--$editIdがURLパラメータから取得された場合、該当のデータを予めvalueに入れておきます。--> 70 <input type="text" name="name" placeholder="お名前" value="<?php echo $name; ?>" /><br/> 71 <input type="text" name="age" placeholder="年齢" value="<?php echo $age; ?>" /><br/> 72 <input type="text" name="skill" placeholder="スキル" value="<?php echo $skill; ?>" /><br/> 73 <?php if($userCount == 0): ?> 74 <!--もしidに該当するデータが1つもなければ登録ボタン--> 75 <input type="submit" name="submitBtn" value="登録" /> 76 <?php else: ?> 77 <!--もしidに該当するデータが存在していれば更新ボタン--> 78 <input type="submit" name="submitBtn" value="更新" /> 79 <?php endif; ?> 80</form> 81 82 83<?php 84 85 $userdata = "select * from userdata order by id DESC"; 86 $userdata = mysqli_query($mysqli,$userdata); 87 88 while ($userdataArray = mysqli_fetch_assoc($userdata)) { 89 echo $id = $userdataArray["id"]; 90 echo ","; 91 echo $name = $userdataArray["name"]; 92 echo ","; 93 echo $age = $userdataArray["age"]; 94 echo ","; 95 echo $skill = $userdataArray["skill"]; 96 echo "｜"; 97 echo "<button class='deleteBtn' data-id='".$id."'>削除する</button>"; 98 echo "｜"; 99 echo "<button class='editBtn' data-id='".$id."'>編集する</button>"; 100 echo "<br>"; 101 }; 102 103?> 104 105 106<script> 107 108 $(".deleteBtn").click(function(){ 109 var btnid = $(this).data("id"); 110 deleteData(btnid); 111 }); 112 113 $(".editBtn").click(function(){ 114 var btnid = $(this).data("id"); 115 window.location.href = "./?edit="+btnid; 116 117 }); 118 119 function deleteData(btnid){ 120 $.ajax({ 121 type: 'POST', 122 dataType:'json', 123 url:'functions/delete_func.php', 124 data:{ 125 btnid:btnid, 126 }, 127 success:function(data) { 128 window.location.href = "./"; 129 }, 130 error:function(XMLHttpRequest, textStatus, errorThrown) { 131 alert(errorThrown); 132 } 133 }); 134 }; 135 136</script> 137 138</body> 139</html>
db.phpファイル
php
1<?php 2 $mysqli = new mysqli("サーバー名", "ユーザー名", "パスワード", "データベース名"); 3 if ($mysqli->connect_errno) { 4 printf("接続失敗: %s\n", $mysqli->connect_error); 5 exit(); 6 } 7?>
delete_func.phpファイル
php
1<?php 2 3 require_once "db.php"; 4 5 $jsondata = $_POST['btnid']; 6 $resultcontents = mysqli_query($mysqli,"delete from userdata where id = '".$jsondata."'"); 7 header('Content-type: application/json'); 8 echo json_encode( $jsondata ); 9?>
問題点
削除ボタンを押すと
SyntaxError: Unexpected token < in JSON at position 0
のエラーが出て削除ボタンが機能しません。
やったこと
問題集にある文法をそのままコピペ
変更した箇所
サーバー名やデータベース名、パスワード、トップページ(新規追加用のリンク)のurlなど
このエラー文についてググったところ構文エラーと出ており、エラー文内の”＜”はindex.phpファイルの先頭にある<!DOCKTYPE>の<であるようです。コンソール画面に出ていました。
ためしにこの<!DOCKTYPE>の<を消すと今度は!が該当する記号としてエラー文とともに出てきます。
教材の回答ページではエラーも出ずに機能してるのですが、自分の環境で再現するとエラーを吐いているため教材自体が間違ってはいないと思うのですが、どこをどういじったらいいかわからず困っています。
ご教授のほど、よろしくおねがいします。
追記：console.log(btnid)を追加
javascript
1 2 $(".deleteBtn").click(function(){ 3 var btnid = $(this).data("id"); 4 console.log(btnid); //<-----追加した文言 5 deleteData(btnid); 6 }); 7 8 //編集ボタンをeditBtnをクリックすると、、 9 $(".editBtn").click(function(){ 10 //ボタンにセットされたdata-idを取得。 11 var btnid = $(this).data("id"); 12 console.log(btnid); //<-----追加した文言 13 //URLにパラメータ./?edit={id}をつけて再読み込み。 14 window.location.href = "./?edit="+btnid; 15 //次の画面でURLパラメータをphpが受け取り、処理。 16 //冒頭から読み返してみてください。 17 }); 18 19 function deleteData(btnid){ 20 $.ajax({ 21 type: 'POST', 22 dataType:'json', 23 url:'functions/delete_func.php', 24 data:{ 25 btnid:btnid, 26 }, 27 success:function(data) { 28 window.location.href = "./"; 29 }, 30 error:function(XMLHttpRequest, textStatus, errorThrown) { 31 alert(errorThrown); 32 } 33 }); 34 };
コンソール画面に押したボタンのidが表示されました。
keiさんのアドバイスに対しての追記
レスポンス画面
回答3件
0
SyntaxError: Unexpected token < in JSON at position 0
これが出ている場合は、たいてい変数の値を取得できていません。変数に対し
undefined variable …
だとか、エラーが発されている場合で、それによってエスケープしないといけない値が
表示されてしまい、json化できなくてアラートが表示されます。
まず、順番に
- フォーム上で削除したいデータのidの値は正しく取得しているのか？
- PHPプログラム上できちんとidの値は送られているのか？
変数の流れを順番に見ていった方がいいです。
あとPHPはたいていhtml構文の先頭に記述した方がトラブルが少なくなります。html構文はあくまでPHPの出力変数を埋め込む場所と認識した方がいいでしょう。
投稿2019/04/12 01:02
総合スコア3633
0
ベストアンサー
headerでContent-typeをjsonとしているときなど、出力しようとしている情報がjson形式として正しくない場合に出るエラーです。
ざっと見た感じ変なところがないようには見えますが、もしかしたら$_POST['btnid']が単なる文字列からなのかな、、、、とかいう感じです。
以下、試してみてください。
php
1echo json_encode([$jsondata]);
配列にします。
もちろんJSON形式として正しくない、というのがエラーの原因なので、JSONデータ以外に何かしら出力があればそれも「JSON形式として正しくない」と認識されます。
例えばPHPのエラー出力されてたり、とか。
あと、後に何も出力がないのでしたら?>は不要です。
不要な?>を書いてはいけない理由は明確で、<?php … ?>の外にあるコードは出力されてしまうからだ。つまり、誰かが?>の直後に余分な改行を入れてしまったら、わかりにくいタイミングで意図しない改行が出力されることになる。
試してみてほしいこと２（※根本的な解決方法ではありません）
php
1<?php 2ob_start(); //追加 3 4 require_once "db.php"; 5 6 $jsondata = $_POST['btnid']; 7 $resultcontents = mysqli_query($mysqli,"delete from userdata where id = '".$jsondata."'"); 8ob_end_clean(); //追加 9 header('Content-type: application/json'); 10 echo json_encode( $jsondata );
試してみてほしいこと３（※データベースに影響を及ぼす処理にはtry-catchは必須です）
php
1try{ 2 require_once "db.php"; 3 4 $jsondata = $_POST['btnid']; 5 $resultcontents = mysqli_query($mysqli,"delete from userdata where id = '".$jsondata."'"); 6 header('Content-type: application/json'); 7 echo json_encode( $jsondata ); 8}catch(mysqli_sql_exception $e){ 9 echo json_encode( $e ); 10}
ミニマムコード
画面側
html
1<button type="button" class="deleteBtn" data-id="1">1削除</button> 2<button type="button" class="deleteBtn" data-id="2">2削除</button> 3<button type="button" class="deleteBtn" data-id="3">3削除</button> 4<button type="button" class="deleteBtn" data-id="4">4削除</button> 5<script 6 src="https://code.jquery.com/jquery-3.3.1.min.js" 7 integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 8 crossorigin="anonymous"></script> 9 <script> 10 $(".deleteBtn").on('click',function(){ 11 console.log($(this).data('id')); 12 $.ajax({ 13 type: 'POST', 14 dataType:'json', 15 url:'a.php', 16 data:{ 17 btnid:$(this).data('id'), 18 }, 19 success:function(data) { 20 console.log('success'); 21 console.log(data); 22 }, 23 error:function(XMLHttpRequest, textStatus, errorThrown) { 24 console.log(XMLHttpRequest); 25 console.log(textStatus); 26 console.log(errorThrown); 27 } 28 }); 29 }); 30 </script>
ajaxで呼び出される側
php
1<?php 2echo json_encode( $_POST['btnid'] );
console.log結果：
1 success 1 2 success 2 3 success 3
※ちなみにheader()つけても同じでした
php
1<?php 2header('Content-type: application/json'); 3echo json_encode( $_POST['btnid'] );
ちなみに存在しないphp、URLをurlに指定した場合は下記のようなエラーが出た
SyntaxError: Unexpected token s in JSON at position 0
URL間違ってるかも？
投稿2019/04/11 21:17
編集2019/04/12 03:49
総合スコア80850
で、あれば正しくbtnidが渡っていないと思います。
var btnidの宣言をclickイベント内ではなくグローバルスコープに出してください。イベント内のvar宣言は取ってくださいね
>>グローバルスコープに出してください。
コンソール画面に出すという認識でいいのでしょうか?
試してみたところ編集ボタン、削除ボタンともに押した際に出てくるidは一致していましたが、削除ボタンを押したときのみエラーがまた出ました。
試行画面を補足として追記しましたので、ご確認ください。
ごめんなさいちょっと勘違いしてました。
引数で渡してたんですね。
私がしてほしかったのは下記、
var btnid = '';
$(".deleteBtn").click(function(){
btnid = $(this).data("id");
deleteData();
});
$(".editBtn").click(function(){
btnid = $(this).data("id");
window.location.href = "./?edit="+btnid;
});
function deleteData(){
$.ajax({
type: 'POST',
dataType:'json',
url:'functions/delete_func.php',
data:{
btnid:btnid,
},
success:function(data) {
window.location.href = "./";
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
};
あ、もちろんbtnidが想定した値かどうかを確認するのは必要です。
delete_func.phpのほうで下記だけ書いた場合は何が返ってきますか？
<?php
header('Content-type: application/json');
echo json_encode( $_POST['btnid'] );
追記ありがとうございます。
delete_func.phpの分も含めて追記分を試行してみました。
結果は同じエラーが返って来ました。
header()をコメントアウトするとどうですか？
コメントアウトしてみましたがだめでした。
同じエラーが出ました。
下記２パターンではどうでしょうか
１つ目
<?php
echo json_encode( $_POST['btnid'] );
２つ目
<?php
echo json_encode( ['a'] );
もし２つ目でも同じエラーなら<?php ?>の外に空白があったりするのではと
いろいろ試してくれてありがとうございます。
2点試してみましたが同じエラーが出ました汗
了解です。
確認してみます!!
ミニマムコード追記しました。
全て正しく指定されているのであれば押したdata-idの値がちゃんと返ってきます。
最後に仮説で書きましたが、
'functions/delete_func.php' ←この指定が間違っているのでは？
解決しました！！
url間違ってました。
httpからすべて手入力でurlに入れたところエラーも出ず、削除ボタンも機能しました。
たくさんの試行錯誤ありがとうございました！！
m(_ _)m
あぁ。やっぱり、ですね。
たぶん最初に<!・・・と出てたのはサーバー側のエラー画面のhtmlかもしれませんね。
解決されたようで何よりです。
functions/delete_func.php だと相対パスになるので
/functions/delete_func.php のような絶対パスにされると良いかもしれません。
httpから全て打つと環境変わるたびに打ち換えなきゃいけませんので。
問題切り分け、問題解決までに確認できるヒントがたくさん今回出たと思うので、
まず確認してみてください。自己解決できるようになると成長を実感できます。
実はjQueryを読み込む際にも読み込めていないエラーが出ていてhttpから入力して解決していたのですが、その時点で他のurl指定箇所を調べるべきでした。
いつも丁寧なアドバイスと試行錯誤をしていただき、感謝いたします。
jQuery本体という話でしたら私のミニマムコードにあるようにCDN使ったほうが確実ですね。
他のプラグインとかもそうですが、本体のコードをいじることがないのでしたら自分のところに置いておく必要はないと思います。
了解です！！
ありがとうございます！！
0
デベロッパーツール の Networkタブ のResponse部分を確認してみてください。
【Chrome デベロッパーツール Networkパネルの使い方 | Web Tips】
https://weback.net/utility/1491/#contents-6
投稿2019/04/12 02:33
総合スコア69400
回答有り難うございます。
確認してみましたが、赤文字のエラーなどはなかったです。
初めて使ってみたのでそういう見方であってるかちょっとわかりませんが、ありがとうございます。
エラーではなくResponseにJSONが来ているかを確認してください。
追記にresponseの確認画面を追加いたしました。
エラー時は空白になっているのでJSONが来ていないということでしょうか？
PHPのエラーメッセージを表示するようにしてから、もう一度確認してみてください。
特に設定していない場合、PHPでエラーが起こると中身なしで返ってくることがあります。
【PHPのエラーメッセージを出力する | mawatari.jp】
https://mawatari.jp/archives/how-to-display-php-errors
解決しました！
.ajaxのurlが間違えていました。
httpから省略せずに入力したところエラーも出ずに削除ボタンも機能しました。
アドバイスありがとうございました！！
ちなみにこの確認機能はdelete_func.php内で入力するのでしょうか？
それともindex.php内？
httpでアクセスする全PHPファイルの先頭。requireでしか呼ばれないファイルの場合は不要。
わかりました。
ありがとうございます！！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/12 02:39
2019/04/12 02:49 編集
2019/04/12 03:03