0
mysqlからデータを印刷すると、すべてがhtmlテーブル全体に広がるのではなく、最初の行の1つのセルになります。mysqlのすべてがhtmlテーブルの1つのセルにのみ印刷されています
私が書いたコードはすべて下に掲載しましたが、このページの下部にあるget_input.jsとget_input.phpファイルに問題があります。
どうすればこの問題を解決できますか？
vocab_input.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="vocab_input.js"></script>
<script type="text/javascript" src="get_input.js"></script>
<style>
th {
text-align: center;
}
td {
text-align: center;
}
form {
margin-top: 50px;
}
</style>
</head>
<body>
<!-- INPUT -->
<div class="container">
<h1></h1>
<form action="vocab_input.php" method="post" id="input_form">
<label>Word:</label>
<input type="text" name='word'>
<label>POS:</label>
<input type="text" name='pos'>
<label>Translation:</label>
<input type="text" name='trans'>
<label>Definition:</label>
<input type="text" name='definition'>
<label>Sentence:</label>
<input type="text" name='sen'>
<input type="submit">
</form>
</div>
<!-- BUTTONS -->
<div class="btn-group btn-group-justified" role="group" aria-label="..." style="margin-top: 50px;">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" id="list">Vocab List</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Matching</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Scrambled</button>
</div>
</div>
<!-- OUTPUT -->
<table class="table">
<tr>
<th>Word</th>
<th>Part of Speech</th>
<th>Translation</th>
<th>Definition</th>
<th>Sentence</th>
</tr>
<tr>
<td id="mytable"></td>
</tr>
</table>
</body>
</html>
vocab_input.js
$(function() {
$('#input_form').on('submit', function(e) {
var data = $("#input_form :input").serialize();
$.ajax({
type: "POST",
url: "vocab_input.php",
data: data,
});
e.preventDefault();
});
});
ここではvocab_input.php
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "vocab";
$word = $_POST['word'];
$pos = $_POST['pos'];
$trans = $_POST['trans'];
$definition = $_POST['definition'];
$sen = $_POST['sen'];
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Insert data
$sql = "INSERT INTO user_input (word, pos, trans, definition, sen)
VALUES ('$word', '$pos', '$trans', '$definition', '$sen')";
$conn->query($sql);
$conn->close();
?>
問題がどこにあるかである：
get_input.js
$(document).ready(function(){
$("#list").click(function(){
$.ajax({
type: 'GET',
url: 'get_input.php',
success: function(data) {
$("#mytable").text(data);
}
})
})
})
get_input.php
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "vocab";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM user_input";
$result = $conn->query($sql);
while ($row = mysqli_fetch_assoc($result)) {
foreach($row as $field) {
echo htmlspecialchars($field);
}
}
$conn->close();
?>
あなたのコードはに対して脆弱である[** SQLインジェクション攻撃**]（https://en.wikipedia.org/wiki/SQL_injection） 。 [** mysqli **]（https://secure.php.net/manual/en/mysqli.prepare.php）または[** PDO **]（https://secure.php.net/）を使用してください。 manual/en/pdo.prepared-statements.php）は、[** this post **]（https://stackoverflow.com/questions/60174/how-can-i-prevent-sql - インジェクション - イン - php）。 –
ありがとうございます。ちょうど今学ぶので、私は道を見てみましょう。一方、（$行= mysqli_fetch_assoc（$結果））{ foreachの（$フィールドとして$行）{ エコー '' .htmlspecialchars（$フィールド）： – nasan