good bad ボタンをajaxで実装
解決したいこと
good bad ボタンをajaxで実装したい。
例）
php/javascriptでgood/badボタンの実装を目指しています。
解決方法を教えて下さい。
発生している問題・エラー
good/badのポイントが登録されずにコンソールログにて以下のように記述されます。
【コンソールログにて】
edu_home2.php?schoolyear=中1&sub=数学(方程式)&type=通常:694 {"status":"OK","id":"131","good":"2","bad":"0"}
edu_home2.php?schoolyear=中1&sub=数学(方程式)&type=通常:697 null
edu_home2.php?schoolyear=中1&sub=数学(方程式)&type=通常:698 null
該当するソースコード
【infoedu_goodbad.php】
<?php
define('DB_HOST', 'localhost');
define('DB_NAME', '****');
define('DB_USER', '****');
define('DB_PASS', '****');
//データの受け取り
//$id = filter_input(INPUT_POST, 'id');
//$point = filter_input(INPUT_POST, 'point');
$id = filter_input(INPUT_POST, 'id');
$point= filter_input(INPUT_POST, 'point');
if (empty($id)) {
header('Content-type: application/json');
die(json_encode(['status' => 'ER', 'message' => 'data abort']));
}
try {
//$mysqli = new mysqli('mysql1025.db.sakura.ne.jp','riverbridge','yuya1582','riverbridge_koushi');
$mysqli = new mysqli('localhost', 'root', 'yuya1582', 'riverbridge_koushi');
//データの登録
if($point==1){
$sql = "UPDATE edupoint SET good = good + 1 WHERE id = $id;";
$result = $mysqli -> query($sql);
}
elseif($point==2){
$sql = "UPDATE edupoint SET bad = bad + 1 WHERE id = $id;";
$result = $mysqli -> query($sql);
}
else{}
$sql = "select * from edupoint WHERE id = $id;";
$result = $mysqli -> query($sql);
$row = $result->fetch_assoc();
$good = $row['good'];
$bad = $row['bad'];
} catch (PDOException $e) {
$errmsg = 'database error : ' . $e->getMessage();
}
//コンソールテキストの文面
if (isset($errmsg)) $json = json_encode(['status' => 'ER', 'message' => $errmsg]);
else if (isset($id)) $json = json_encode(['status' => 'OK', 'id' => $id, 'good' => $good, 'bad' => $bad]);
else $json = json_encode(['status' => 'NG', 'id' => $id]);
header('Content-type: application/json');
die($json);
【eduhome2.php】
<?php
session_start();
$userId = $_SESSION['userId'];
$mysqli = new mysqli('mysql1025.db.sakura.ne.jp','xxxxx','xxxxx','xxxxx');
if (!isset($_SESSION['userId'])) {
header("Location: ../../index.html");
exit;
}
//koushaidを取るためのコード（ここから）
$sql = "select * from koushi_account
where userId = '$userId';";
$koushi = $mysqli->query($sql);
$row = $koushi->fetch_assoc();
$kousha = $row['kousha_id'];
$sql = "select * from koushi_account where userId='$userId'";
$name = $mysqli->query($sql);
$row = $name->fetch_assoc();
$view = $row['viewName'];
//koushaidを取るためのコード（ここまで)
$schoolyear = $_GET['schoolyear'];
$sub = $_GET['sub'];
$type = $_GET['type'];
if ($kousha == 1) {
$sql = "select * from edupoint where type='$type' and sub='$sub' and cate2='単元別ポイント' and schoolyear='$schoolyear' and DEL_FLG='0' and (kousha_id='$kousha' or kousha_id='0') order by no asc;";
} elseif ($kousha == 2) {
$sql = "select * from edupoint where type='$type' and sub='$sub' and cate2='単元別ポイント' and schoolyear='$schoolyear' and DEL_FLG='0' and (kousha_id='$kousha' or kousha_id='0') order by no asc;";
} else {
$sql = "select * from edupoint where type='$type' and sub='$sub' and cate2='単元別ポイント' and schoolyear='$schoolyear' and DEL_FLG='0' order by no asc;";
}
$process = $mysqli->query($sql);
// 2階層下なら上をコピー;where shoolyear='2' and sub='数'
if ($schoolyear == '中1') {
$gakunen = 'j1';
} elseif ($schoolyear == '中2') {
$gakunen = 'j2';
} elseif ($schoolyear == '中3') {
$gakunen = 'j3';
} else {
}
if ($sub == '数学') {
$kamoku = 'ma';
}
if ($sub == '数学(計算)') {
$kamoku = 'ma1';
}
if ($sub == '数学(方程式)') {
$kamoku = 'ma2';
}
if ($sub == '数学(関数)') {
$kamoku = 'ma3';
}
if ($sub == '数学(図形)') {
$kamoku = 'ma4';
}
if ($sub == '数学(他)') {
$kamoku = 'ma5';
} elseif ($sub == '英語(開隆堂)') {
$kamoku = 'en';
} elseif ($sub == '英語(三省堂)') {
$kamoku = 'ens';
} elseif ($sub == '国語') {
$kamoku = 'ja';
} elseif ($sub == '理科') {
$kamoku = 'sc';
} elseif ($sub == '理科(生物)') {
$kamoku = 'sc1';
} elseif ($sub == '理科(力学)') {
$kamoku = 'sc2';
} elseif ($sub == '理科(化学)') {
$kamoku = 'sc3';
} elseif ($sub == '理科(地学)') {
$kamoku = 'sc4';
} elseif ($sub == '歴史') {
$kamoku = 'hi';
} elseif ($sub == '地理') {
$kamoku = 'ge';
} elseif ($sub == '公民') {
$kamoku = 'ci';
} else {
}
$_SESSION['gakunen'] = $gakunen;
$_SESSION['schoolyear'] = $schoolyear;
$_SESSION['kamoku'] = $kamoku;
$search = array('[b]', '[/b]', '[i]', '[/i]', '[u]', '[/u]', '[color:red]', '[color:blue]', '[color:green]', '[/color]', '[large]', '[/large]', '[small]', '[/small]', '[quote]', '[/quote]');
$replace = array('<span style="font-weight: bold">', '</span>', '<span style="font-style: italic">', '</span>', '<span style="text-decoration: underline">', '</span>', '<span style="color: red">', '<span style="color: blue">', '<span style="color: green">', '</span>', '<span style="font-size: x-large">', '</span>', '<span style="font-size: xx-small">', '</span>', '<blockquote>', '</blockquote>');
?>
<i!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> <?= htmlspecialchars($type, ENT_QUOTES) ?> <?= htmlspecialchars($schoolyear, ENT_QUOTES) ?> <?= htmlspecialchars($sub, ENT_QUOTES) ?>の指導法</title>
<link rel="stylesheet" href="../../css/style.css">
</head>
<body>
<div class="wrapper">
<!--ヘッダー-->
<header class="header">
<h1> <?= htmlspecialchars($type, ENT_QUOTES) ?> <?= htmlspecialchars($schoolyear, ENT_QUOTES) ?> <?= htmlspecialchars($sub, ENT_QUOTES) ?>の指導法 <small>【ログイン:<?= htmlspecialchars($view, ENT_QUOTES) ?>】</h1>
<?php if ($_SESSION['userId'] != 'teamida') { ?>
<!--ハンバーガーメニューー-->
<body>
<p id="result"></p>
<div id="wrapper">
<p class="btn-gnavi">
<span></span>
<span></span>
<span></span>
</p>
<nav id="global-navi">
<ul id="test" class="menu">
</ul>
</nav>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script src="../../js/index2.js"></script>
<!--ハンバーガーメニューー--> <?php } ?>
<hr size=”500px”>
</header>
<!--ヘッダー ここまで-->
<!--メイン-->
<main>
<center>
<style>
.no {
text-orientation: upright;
-ms-writing-mode: tb-rl;
align: right;
writing-mode: vertical-rl;
width: 6px;
font-size: 10px;
}
</style>
<div>
<p class="tablename"><?= htmlspecialchars($schoolyear, ENT_QUOTES) ?> <?= htmlspecialchars($sub, ENT_QUOTES) ?>単元別ポイント</p>
</div>
<table border="1" <?php if ($sub == '数学' || $sub == '数学(計算)' || $sub == '数学(方程式)' || $sub == '数学(関数)' || $sub == '数学(図形)' || $sub == '数学(他)') { ?> class="edupoint114" <?php } ?> <?php if ($sub == '英語(開隆堂)') { ?> class="edupoint115" <?php } ?> <?php if ($sub == '英語(三省堂)') { ?> class="edupoint115" <?php } ?> <?php if ($sub == '国語') { ?> class="edupoint113" <?php } ?> <?php if ($sub == '理科' || $sub == '理科(生物)' || $sub == '理科(力学)' || $sub == '理科(化学)' || $sub == '理科(地学)') { ?> class="edupoint111" <?php } ?> <?php if ($sub == '社会' || $sub == '地理' || $sub == '歴史' || $sub == '公民') { ?> class="edupoint112" <?php } ?>>
<tr>
<th colspan="5">内容</th>
<th>編集</th>
</tr>
</tr>
<?php while ($row = $process->fetch_assoc()) { ?>
<!-- -->
<tr class='trform' id="form_<?= $row['id'] ?>">
<td colspan="5" <?php if ($sub == '数学' || $sub == '数学(計算)' || $sub == '数学(方程式)' || $sub == '数学(関数)' || $sub == '数学(図形)' || $sub == '数学(他)') { ?> class="educue1-ma" <?php } ?> <?php if ($sub == '英語(開隆堂)') { ?> class="educue1-en" <?php } ?> <?php if ($sub == '英語(三省堂)') { ?> class="educue1-en" <?php } ?> <?php if ($sub == '国語') { ?> class="educue1-ja" <?php } ?> <?php if ($sub == '理科' || $sub == '理科(生物)' || $sub == '理科(力学)' || $sub == '理科(化学)' || $sub == '理科(地学)') { ?> class="educue1-sc" <?php } ?> <?php if ($sub == '社会' || $sub == '地理' || $sub == '歴史' || $sub == '公民') { ?> class="educue1-hi" <?php } ?>><?= nl2br(htmlspecialchars($row['cue1'], ENT_QUOTES)) ?></td>
<!-- goodbad実装へ -->
<form class="xform" style="display:inline;padding:0;margin:0" action="infoedu_goodbad.php" method="post">
<td>
<input type="hidden" value="<?= nl2br(htmlspecialchars($row['id'], ENT_QUOTES)) ?>" name="id">
<button name="point" value="1" type="submit">good</button>
<?= htmlspecialchars($row['good'], ENT_QUOTES) ?>/
<button type="submit" name="point" value="2">bad</button>
<?= htmlspecialchars($row['bad'], ENT_QUOTES) ?>
</td>
</form>
<!-- style="display:inline;padding:0;margin:0" -->
<td rowspan="1"><button name="clientupinfo" class="news97" onclick="location.href='upedu2.php?upedu_no=<?= htmlspecialchars($row['id'], ENT_QUOTES) ?>'">詳</button>
<div style="float:right;font-size:50%;"><?= htmlspecialchars($row['no'], ENT_QUOTES) ?>
</td>
</tr>
<tr>
<td <?php if ($sub == '数学' || $sub == '数学(計算)' || $sub == '数学(方程式)' || $sub == '数学(関数)' || $sub == '数学(図形)' || $sub == '数学(他)') { ?> class="educue2-ma" <?php } ?> <?php if ($sub == '英語(開隆堂)') { ?> class="educue2-en" <?php } ?> <?php if ($sub == '英語(三省堂)') { ?> class="educue2-en" <?php } ?> <?php if ($sub == '国語') { ?> class="educue2-ja" <?php } ?> <?php if ($sub == '理科' || $sub == '理科(生物)' || $sub == '理科(力学)' || $sub == '理科(化学)' || $sub == '理科(地学)') { ?> class="educue2-sc" <?php } ?> <?php if ($sub == '社会' || $sub == '地理' || $sub == '歴史' || $sub == '公民') { ?> class="educue2-hi" <?php } ?> colspan="6"> <?= nl2br(str_replace($search, $replace, htmlspecialchars($row['cue2'], ENT_QUOTES))) ?></td>
</tr>
<tr class="testedu">
<td colspan="6" <?php if ($sub == '数学' || $sub == '数学(計算)' || $sub == '数学(方程式)' || $sub == '数学(関数)' || $sub == '数学(図形)' || $sub == '数学(他)') { ?> class="educue3-ma" <?php } ?> <?php if ($sub == '英語(開隆堂)') { ?> class="educue3-en" <?php } ?> <?php if ($sub == '英語(三省堂)') { ?> class="educue3-en" <?php } ?> <?php if ($sub == '国語') { ?> class="educue3-ja" <?php } ?> <?php if ($sub == '理科' || $sub == '理科(生物)' || $sub == '理科(力学)' || $sub == '理科(化学)' || $sub == '理科(地学)') { ?> class="educue3-sc" <?php } ?> <?php if ($sub == '社会' || $sub == '地理' || $sub == '歴史' || $sub == '公民') { ?> class="educue3-hi" <?php } ?>>
<div style="font-size:10px; color:black;"> <?= nl2br(str_replace($search, $replace, htmlspecialchars($row['cue3'], ENT_QUOTES))) ?></span></div>
<?php
$imagelink_jpg = "../../images/edu/" . htmlspecialchars($kamoku, ENT_QUOTES) . "_" . htmlspecialchars($_SESSION['gakunen'], ENT_QUOTES) . "/" . htmlspecialchars($kamoku, ENT_QUOTES) . "_" . htmlspecialchars($_SESSION['gakunen'], ENT_QUOTES) . "_" . htmlspecialchars($row['no'], ENT_QUOTES) . ".jpg";
$imagelink_png = "../../images/edu/" . htmlspecialchars($kamoku, ENT_QUOTES) . "_" . htmlspecialchars($_SESSION['gakunen'], ENT_QUOTES) . "/" . htmlspecialchars($kamoku, ENT_QUOTES) . "_" . htmlspecialchars($_SESSION['gakunen'], ENT_QUOTES) . "_" . htmlspecialchars($row['no'], ENT_QUOTES) . ".png";
$imagedb = htmlspecialchars($row['file_path']);
if (file_exists($imagelink_jpg) || file_exists($imagelink_png)) //直ファイルがあるかどうか判定
{
if (file_exists($imagedb)) //★ファイルあり・DB登録あり(正常な状態)
{ ?> <div class="educue-image">
<a href="<?= htmlspecialchars($imagedb, ENT_QUOTES) ?>">画像</a>
</div>
<?php } else { //★ファイルあり・DB登録なし(直アップロード直後)
?>
<?php if (file_exists($imagelink_jpg)) { ?>
<div class="educue-image">
<a href="<?= htmlspecialchars($imagelink_jpg, ENT_QUOTES) ?>"> 画像jpg</a>
</div>
<?php if (file_exists($imagelink_png)) { ?>
<div class="educue-image">
<a href="<?= htmlspecialchars($imagelink_png, ENT_QUOTES) ?>"> 画像png</a>
</div>
<?php }
}
}
} ?>
<?php
$gazo2 = $row['file_path11'];
$gazo3 = $row['file_path12'];
$gazo4 = $row['file_path2'];
$gazo5 = $row['file_path21'];
$gazo6 = $row['file_path22'];
if (file_exists($gazo2)) { ?> <div class="educue-image"><a href="<?= htmlspecialchars($row['file_path11'], ENT_QUOTES) ?>">画像2</a> </div><?php }
if (file_exists($gazo3)) { ?> <div class="educue-image"><a href="<?= htmlspecialchars($row['file_path12'], ENT_QUOTES) ?>">画像3</a> </div><?php }
if (file_exists($gazo4)) { ?> <div class="educue-image"><a href="<?= htmlspecialchars($row['file_path2'], ENT_QUOTES) ?>">画像4</a> </div><?php }
if (file_exists($gazo5)) { ?> <div class="educue-image"><a href="<?= htmlspecialchars($row['file_path21'], ENT_QUOTES) ?>">画像5</a> </div><?php }
if (file_exists($gazo6)) { ?> <div class="educue-image"><a href="<?= htmlspecialchars($row['file_path22'], ENT_QUOTES) ?>">画像6</a> </div><?php } ?>
</td>
</tr>
<tr>
<td colspan="3"><span style="font-size:10px; color:black"> <?= nl2br(htmlspecialchars($row['up'], ENT_QUOTES)) ?></span></td>
<td colspan="3"><span style="font-size:10px; color:black"> <?= nl2br(htmlspecialchars($row['down'], ENT_QUOTES)) ?></span></td>
</tr>
<?php } ?>
</table>
</form>
</main>
<script>
const trs = document.querySelectorAll('.trform'); //<tr class="trform">●●●●</tr>のデータを取り出している
for (let i = 0; i < trs.length; i++) { //
let tr = trs[i];
let id = tr.id;
if (tr.id.substring(0, 5) == 'form_') { //substring 5文字目の字を探している
id = tr.id.substring(5); //substring 5文字以降
let form = document.querySelector('#' + tr.id + ' form'); //←スペースなくしたらダメ
form.addEventListener('submit', function(e) {
e.preventDefault();
let oReq = new XMLHttpRequest();
oReq.onload = ajaxSuccess;
oReq.open("post", form.action);
oReq.send(new FormData(form));
});
}
}
function ajaxSuccess() {
console.log(this.responseText);
let obj = JSON.parse(this.responseText);
if (obj.status == 'OK') {
console.log(document.querySelector('#form_' + obj.id + ' .good'));
console.log(document.querySelector('#form_' + obj.id + ' .bad'));
}
if (obj.status == 'NG') document.querySelector('#form_' + obj.id + ' .').innerHTML = "";
}
</script>
<!--メインここまで-->
<!--フッター-->
</div>
</body>
</html>
自分で試したこと
idの取り方に誤りがあると思ったのですが、うまく修正できずに困っています。
どうかアドバイスをお願いします。
0 likes
