質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

SyntaxError: Unexpected token < in JSON at position 0 のエラー対策がわからない

Buretan
dokugaku_genkai

総合スコア28

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

3回答

0評価

1クリップ

36880閲覧

投稿2019/04/11 17:22

編集2019/04/12 04:08

解決済み追記
みなさま回答ありがとうございました!!
.ajax内のurl指定が間違えていました。
フォルダ構成も同じでやっていたので合っているものと思い込んでいました。
たくさんのアドバイスありがとうございました!!
m(_ _)m

現状

フォーム画面に3つ入力欄があり、そこに入力したテキストがデータベースへ登録され、削除、編集ができるプログラムのテストをしています。

フォーム外観
フォーム外観

index.phpファイル

php

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>サンプルテンプレート</title> <meta name="description" content="サンプルテンプレート"> <meta name="keywords" content="レストラン,フレンチ,原宿"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link href="css/reset.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <?php require_once "functions/db.php"; //URLパラメータを取得します。 //URLの後ろに?edit=123のような感じでつくのがURLパラメータです。 $editId = $_GET["edit"]; //このパラメータをphpで取得することができます。 //urlを通じて編集するデータのidを受け取ります。 //受け取ったidに一致するデータをデータベースから呼び出して、、、 $userdataEdit = "select * from userdata where id = '".$editId."' order by id DESC"; $userdataEdit = mysqli_query($mysqli,$userdataEdit); //もしデータが存在していたら、変数に格納します。 while ($userdataEditArray = mysqli_fetch_assoc($userdataEdit)) { $name = $userdataEditArray["name"]; $age = $userdataEditArray["age"]; $skill = $userdataEditArray["skill"]; }; //データの数を数えます。 //もしデータが存在していれば1になります。 //この変数は後で使います。 $userCount = $userdataEdit->num_rows; //もし、フォームから投稿された(POSTされた)場合、、 if ($_SERVER['REQUEST_METHOD'] === 'POST') { //投稿されたデータを受け取ります。 $name = htmlspecialchars($_POST['name'], ENT_QUOTES); $age = htmlspecialchars($_POST['age'], ENT_QUOTES); $skill = htmlspecialchars($_POST['skill'], ENT_QUOTES); //ここで、データの数をカウントした$userCountを使います。 //もしデータがデータベースの中に存在したら(数が0じゃなければ)、、、 if($userCount !== 0){ //$editIdに一致したデータに上書きします。 $result = mysqli_query($mysqli,"update userdata set name = '".$name."',age = '".$age."',skill = '".$skill."' where id = '".$editId."'"); }elseif (!empty($name)||!empty($age)||!empty($skill)){ //もしデータが0だったら新規で追加します。 $result = mysqli_query($mysqli,"insert into userdata(name,age,skill) VALUES('$name','$age','$skill')"); }; }; ?> <!--パラメータをつけたURLだと編集画面になるため、パラメータ無しのURLがそのまま新規追加--> <div style="padding-bottom:15px;"> <a href="http://サーバー名/index.php/">新規追加</a> </div> <h1>登録フォーム</h1> <form method="post" action=""> <!--$editIdがURLパラメータから取得された場合、該当のデータを予めvalueに入れておきます。--> <input type="text" name="name" placeholder="お名前" value="<?php echo $name; ?>" /><br/> <input type="text" name="age" placeholder="年齢" value="<?php echo $age; ?>" /><br/> <input type="text" name="skill" placeholder="スキル" value="<?php echo $skill; ?>" /><br/> <?php if($userCount == 0): ?> <!--もしidに該当するデータが1つもなければ登録ボタン--> <input type="submit" name="submitBtn" value="登録" /> <?php else: ?> <!--もしidに該当するデータが存在していれば更新ボタン--> <input type="submit" name="submitBtn" value="更新" /> <?php endif; ?> </form> <?php $userdata = "select * from userdata order by id DESC"; $userdata = mysqli_query($mysqli,$userdata); while ($userdataArray = mysqli_fetch_assoc($userdata)) { echo $id = $userdataArray["id"]; echo ","; echo $name = $userdataArray["name"]; echo ","; echo $age = $userdataArray["age"]; echo ","; echo $skill = $userdataArray["skill"]; echo "|"; echo "<button class='deleteBtn' data-id='".$id."'>削除する</button>"; echo "|"; echo "<button class='editBtn' data-id='".$id."'>編集する</button>"; echo "<br>"; }; ?> <script> $(".deleteBtn").click(function(){ var btnid = $(this).data("id"); deleteData(btnid); }); $(".editBtn").click(function(){ var btnid = $(this).data("id"); window.location.href = "./?edit="+btnid; }); function deleteData(btnid){ $.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); } }); }; </script> </body> </html>

db.phpファイル

php

<?php $mysqli = new mysqli("サーバー名", "ユーザー名", "パスワード", "データベース名"); if ($mysqli->connect_errno) { printf("接続失敗: %s\n", $mysqli->connect_error); exit(); } ?>

delete_func.phpファイル

php

<?php require_once "db.php"; $jsondata = $_POST['btnid']; $resultcontents = mysqli_query($mysqli,"delete from userdata where id = '".$jsondata."'"); header('Content-type: application/json'); echo json_encode( $jsondata ); ?>

問題点

削除ボタンを押すと
SyntaxError: Unexpected token < in JSON at position 0
のエラーが出て削除ボタンが機能しません。


やったこと
問題集にある文法をそのままコピペ

変更した箇所
サーバー名やデータベース名、パスワード、トップページ(新規追加用のリンク)のurlなど


このエラー文についてググったところ構文エラーと出ており、エラー文内の”<”はindex.phpファイルの先頭にある<!DOCKTYPE>の<であるようです。コンソール画面に出ていました。
ためしにこの<!DOCKTYPE>の<を消すと今度は!が該当する記号としてエラー文とともに出てきます。

教材の回答ページではエラーも出ずに機能してるのですが、自分の環境で再現するとエラーを吐いているため教材自体が間違ってはいないと思うのですが、どこをどういじったらいいかわからず困っています。

ご教授のほど、よろしくおねがいします。


追記:console.log(btnid)を追加

javascript

$(".deleteBtn").click(function(){ var btnid = $(this).data("id"); console.log(btnid);              //<-----追加した文言 deleteData(btnid); }); //編集ボタンをeditBtnをクリックすると、、 $(".editBtn").click(function(){ //ボタンにセットされたdata-idを取得。 var btnid = $(this).data("id"); console.log(btnid);              //<-----追加した文言 //URLにパラメータ./?edit={id}をつけて再読み込み。 window.location.href = "./?edit="+btnid; //次の画面でURLパラメータをphpが受け取り、処理。 //冒頭から読み返してみてください。 }); function deleteData(btnid){ $.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); } }); };

コンソール画面に押したボタンのidが表示されました。
イメージ説明

keiさんのアドバイスに対しての追記
レスポンス画面
イメージ説明

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。