php - 使用 PHP 和 AJAX 更新和删除
问题描述
这是我第一次使用 AJAX 的数据库。我现在真的迷路了，我不知道接下来该怎么办。
我已经完成了我可以在数据库中插入数据并在网站上查看它的部分。更新数据尚未完成，它只能从填写表格中的数据库中获取数据，但无法将其插入数据库。按行删除数据也是我的问题。
<?php
$connect = mysqli_connect("localhost", "root", "", "test");
$query = "SELECT * FROM tbl_users ORDER BY id DESC";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Database</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h3 class="jumbotron jumbotron-fluid" align="center">Registration Database</h3>
<div class="container" style="width:900px;">
<div class="table-responsive">
<div align="right">
<input type="button" data-toggle="modal" data-target="#add_data_Modal" value="Add User" class="btn btn-primary">
</input>
</div>
<br />
<div id="employee_table">
<br />
<table class="table table-bordered table-hover">
<tr class = thead-dark>
<th width="40%">First Name</th>
<th width="40%">Last Name</th>
<th width="5%">View</th>
<th width="5%">Update</th>
<th width="5">Delete</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr id="<?php echo $row['id'] ?>" >
<td data-target="firstname"><?php echo $row["firstname"]; ?></td>
<td data-target="lastname"><?php echo $row["lastname"]; ?></td>
<td>
<input type="button" name="view" value="View" id="<?php echo $row["id"]; ?>" class="btn btn-info btn-sm view_data" >
</td>
<td>
<input type="button" name="update" value="Update" id="<?php echo $row["id"]; ?>" class="btn btn-success btn-sm update_data" >
<td>
<input type="button" name="delete" value="Delete" id="<?php echo $row["id"]; ?>" class="btn btn-danger btn-sm delete_data" >
</td>
<?php
}
?>
</table>
</div>
</div>
</div>
<br />
<button onclick="topFunction()" id="myBtn" title="Go to top" class="btn btn-block btn-secondary mx-auto d-block">Back to Top</button>
</body>
</html>
<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add User to Database</h4>
</div>
<div class="modal-body">
<form method="post" id="insert_form" >
<label>Full Name</label>
<input type="text" name="firstname" id="firstname" class="form-control" placeholder="Enter First Name" />
<br />
<input type="text" name="middlename" id="middlename" class="form-control" placeholder="Enter Middle Name" />
<br />
<input type="text" name="lastname" id="lastname" class="form-control" placeholder="Enter Last Name" />
<br />
<label>Address</label>
<input type="text" name="street" id="street" class="form-control" placeholder="Street">
<br />
<input type="text" name="barangay" id="barangay" class="form-control" placeholder="Barangay">
<br />
<select name="city" class="form-control">
<option value="Caloocan">Caloocan</option>
<option value="Las Piñas">Las Piñas</option>
<option value="Makati">Makati</option>
<option value="Malabon">Malabon</option>
<option value="Mandaluyong">Mandaluyong</option>
<option value="Manila">Manila</option>
<option value="Marikina">Marikina</option>
<option value="Muntinlupa">Muntinlupa</option>
<option value="Navotas">Navotas</option>
<option value="Parañaque">Parañaque</option>
<option value="Pasay">Pasay</option>
<option value="Pasig">Pasig</option>
<option value="Quezon City">Quezon City</option>
<option value="San Juan">San Juan</option>
<option value="Taguig">Taguig</option>
<option value="Valenzuela">Valenzuela</option>
</select>
<br />
<input type="text" name="zipcode" id="zipcode" class="form-control" placeholder="Zip Code">
<br />
<label>Birth Date</label><br />
<input type="date" value="date" id="date" name="birthday" class="form-control" locked onblur="getAge();" placeholder="YYYY-MM-DD" />
<br />
<label for="age">Age</label><br />
<input type="text" id="age" name="age" value="" class="form-control" placeholder="Your Age" readonly>
<br />
<label>Gender</label><br />
<input type="radio" name="gender" value="male" > Male<br />
<input type="radio" name="gender" value="female"> Female<br />
<br />
<label>Contact Number</label>
<br />
<div class="input-group-append">
<span class="input-group-text">+63</span>
<input type="text" name="contactnumber" id="contactnumber" class="form-control" placeholder="919 123 4567 - sample pattern" maxlength="12">
<br />
</div>
<label>Parents Name</label>
<input type="text" name="fathername" id="fathername" class="form-control" placeholder="Father Name" />
<br />
<input type="text" name="mothername" id="mothername" class="form-control" placeholder="Mother Name" />
<br />
<input type="submit" name="insertbutton" id="insertbutton" value="SAVE" class="btn btn-success" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="update_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Update User to Database</h4>
</div>
<div class="modal-body " id="update_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">User Details</h4>
</div>
<div class="modal-body" id="employee_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#insert_form',).on("submit", function(event){
event.preventDefault();
if($('#firstname').val() == "")
{
alert("First Name is required");
}
else if($('#middlename').val() == '')
{
alert("Middle Name is required");
}
else if($('#lastname').val() == '')
{
alert("Last Name is required");
}
else if($('#street').val() == '')
{
alert("Street is required");
}
else if($('#barangay').val() == '')
{
alert("Barangay is required");
}
else if($('#city').val() == '')
{
alert("City is required");
}
else if($('#zipcode').val() == '')
{
alert("Zip Code is required");
}
else if($('#birthday').val() == '')
{
alert("Birthday is required");
}
else if($('#age').val() == '')
{
alert("Age is required");
}
else if($('#gender').val() == '')
{
alert("Gender is required");
}
else if($('#contactnumber').val() == '')
{
alert("Contact Number is required");
}
else if($('#fathername').val() == '')
{
alert("Father Name is required");
}
else if($('#mothername').val() == '')
{
alert("Mother Name is required");
}
else
{
$.ajax({
url:"insert.php",
method:"POST",
data:$('#insert_form').serialize(),
beforeSend:function(){
$('#insertbutton').val("Inserting");
},
success:function(data){
$('#insert_form')[0].reset();
$('#add_data_Modal').modal('hide');
$('#employee_table').html(data);
}
});
}
});
$(document).on('click', '.view_data', function(){
//$('#dataModal').modal();
var employee_id = $(this).attr("id");
$.ajax({
url:"select.php",
method:"POST",
data:{employee_id:employee_id},
success:function(data){
$('#employee_detail').html(data);
$('#dataModal').modal('show');
}
});
});
});
$(document).on('click', '.update_data', function(){
//$('#dataModal').modal();
var employee_id = $(this).attr("id");
$.ajax({
url:"update.php",
method:"POST",
data:{employee_id:employee_id},
success:function(data){
$('#update_detail').html(data);
$('#update_data_Modal').modal('show');
}
});
});
function getAge(){
var birthday = document.getElementById('date').value;
birthday = new Date(birthday);
var today = new Date();
var age = Math.floor((today-birthday) / (365.25 * 24 * 60 * 60 * 1000));
document.getElementById('age').value=age;
}
var mybutton = document.getElementById("myBtn");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>INSERT
<?php
$connect = mysqli_connect("localhost", "root", "", "test");
if(!empty($_POST))
{
$output = '';
$firstname = mysqli_real_escape_string($connect, $_POST["firstname"]);
$middlename = mysqli_real_escape_string($connect, $_POST["middlename"]);
$lastname = mysqli_real_escape_string($connect, $_POST["lastname"]);
$street = mysqli_real_escape_string($connect, $_POST["street"]);
$barangay = mysqli_real_escape_string($connect, $_POST["barangay"]);
$city = mysqli_real_escape_string($connect, $_POST["city"]);
$zipcode = mysqli_real_escape_string($connect, $_POST["zipcode"]);
$birthday = mysqli_real_escape_string($connect, $_POST["birthday"]);
$age = mysqli_real_escape_string($connect, $_POST["age"]);
$gender = mysqli_real_escape_string($connect, $_POST["gender"]);
$contactnumber = mysqli_real_escape_string($connect, $_POST["contactnumber"]);
$fathername = mysqli_real_escape_string($connect, $_POST["fathername"]);
$mothername = mysqli_real_escape_string($connect, $_POST["mothername"]);
$query = "INSERT INTO tbl_users(firstname, middlename, lastname, street, barangay, city, zipcode, birthday, age, gender, contactnumber, fathername, mothername) VALUES ('$firstname', '$middlename', '$lastname', '$street', '$barangay', '$city', '$zipcode','$birthday','$age','$gender','$contactnumber','$fathername','$mothername')";
if(mysqli_query($connect, $query))
{
$output .= '<div class="alert alert-success alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> User is added in the database.
</div>';
$select_query = "SELECT * FROM tbl_users ORDER BY id DESC";
$result = mysqli_query($connect, $select_query);
$output .= '
<table class="table table-bordered table-hover">
<tr class = thead-dark>
<th width="40%">First Name</th>
<th width="40%">Last Name</th>
<th width="5%">View</th>
<th width="5%">Update</th>
<th width="5">Delete</th>
</tr>
';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>' . $row["firstname"] . '</td>
<td>' . $row["lastname"] . '</td>
<td><input type="button" name="view" value="View" id="' . $row["id"] . '" class="btn btn-info btn-sm view_data" /></td>
<td><input type="button" name="update" value="Update" id="' . $row["id"] . '" class="btn btn-success btn-sm update_data" ></td>
<td><input type="button" name="delete" value="Delete" id="' . $row["id"] . '" class="btn btn-danger btn-sm delete_data" ></td>
</tr>
';
}
$output .= '</table>';
}
echo $output;
}
?>UPDATE
<?php
if(isset($_POST["employee_id"]))
{
$output = '';
$connect = mysqli_connect("localhost", "root", "", "test");
$query = "SELECT * FROM tbl_users WHERE id = '".$_POST["employee_id"]."'";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
$output .= '
<form method="post" id="edit_form" >
<label>Full Name</label>
<input type="text" value='.$row["firstname"].' class="form-control" placeholder="First Name" readonly /> <br />
<input type="text" value='.$row["middlename"].' class="form-control" placeholder="Middle Name" readonly /> <br />
<input type="text" value='.$row["lastname"].' class="form-control" placeholder="Last Name" readonly /> <br />
<label>Address</label>
<input type="text" id="street" value='.$row["street"].' class="form-control" placeholder="Street" /> <br />
<input type="text" id="barangay" value='.$row["barangay"].' class="form-control" placeholder="Barangay" /> <br />
<select name="city" class="form-control">
<option value="Caloocan">Caloocan</option>
<option value="Las Piñas">Las Piñas</option>
<option value="Makati">Makati</option>
<option value="Malabon">Malabon</option>
<option value="Mandaluyong">Mandaluyong</option>
<option value="Manila">Manila</option>
<option value="Marikina">Marikina</option>
<option value="Muntinlupa">Muntinlupa</option>
<option value="Navotas">Navotas</option>
<option value="Parañaque">Parañaque</option>
<option value="Pasay">Pasay</option>
<option value="Pasig">Pasig</option>
<option value="Quezon City">Quezon City</option>
<option value="San Juan">San Juan</option>
<option value="Taguig">Taguig</option>
<option value="Valenzuela">Valenzuela</option>
</select><br />
<input type="text" value='.$row["zipcode"].' class="form-control" placeholder="Zip Code" /> <br />
<label>Birth Date</label>
<br />
<input type="date" value='.$row["birthday"].' class="form-control" readonly />
<br />
<label>Age</label>
<input type="text" value='.$row["age"].' class="form-control" readonly />
<label>Gender</label>
<input type="text" value='.$row["gender"].' class="form-control" readonly />
<br />
<label>Contact Number</label>
<input type="text" value='.$row["contactnumber"].' class="form-control" placeholder="919 123 4567 - sample pattern" maxlength="12"><br />
<label>Parents Name</label>
<input type="text" value='.$row["fathername"].' class="form-control" readonly />
<br />
<input type="text" value='.$row["mothername"].' class="form-control" readonly />
<br />
<button type="submit" id="update" class="btn btn-success">UPDATE1</button>
</form>
';
}
echo $output;
}
?>解决方案
推荐阅读
- javascript - 在 JavaScript 中递归构建树
- c++ - 如何使用 nlohmann-json 搜索 json 对象数组并返回匹配对象
- ios - 应用关闭后如何保存图像状态？
- reactjs - 如何从隐私策略组件中隐藏路由器导航栏
- algorithm - 特殊条件下归并排序的时间复杂度
- java - Avro ReflectData 将记录定义覆盖为逻辑类型
- ios - 秘密 QR 码 - 只能由我自己的扫描仪应用程序读取
- r - 非连续矩阵的高级构造函数
- node.js - Passport-Azure-Ad 似乎异步运行
- php - 数据已从数据库中删除，但未删除表行，并且使用 ajax 在 php 中未减少总记录