PHP: Как вставлять, удалять, обновлять данные в PHP на одной странице с ипользованием jQuery, Ajax, MySQL
В этом руководстве мы покажем вам, как получить данные для вставки и удаления обновлений в PHP из базы данных MySQL с помощью ajax.
В этом примере мы будем использовать jQuery, ajax, MySQL и Bootstrap с PHP для создания вставки и удаления обновления на той же странице или в одностраничном приложении.
Обратите внимание, что с помощью jQuery и ajax мы будем вставлять, редактировать и обновлять данные из базы данных MySQL в PHP в приложении той же страницы.
Как вставлять, удалять, обновлять данные в PHP на одной странице
Шаг 1 - Создайте базу данных
На шаге 1 откройте браузер и перейдите к своему phpmyadmin. Затем выполните следующий запрос, чтобы создать базу данных и таблицу:
CREATE DATABASE demo;
CREATE TABLE `users` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`name` VARCHAR(255) NULL DEFAULT NULL,
`age` VARCHAR(255) NULL DEFAULT NULL,
`email` VARCHAR(255) NULL DEFAULT NULL,
`created` DATETIME NULL DEFAULT NULL,
PRIMARY KEY (`id`)
)
COLLATE='latin1_swedish_ci'
ENGINE=InnoDB
AUTO_INCREMENT=1;
INSERT INTO `users` (`id`, `name`, `age`, `email`, `created`) VALUES (NULL, 'Tiago', '26', 'dornelas@studio8k.com', NULL), (NULL, 'Anil', '28', 'ca.anil.kumar@gmail.com', NULL);Шаг 2 - Подключение к базе данных с помощью PHP
Затем создайте один файл с именем db.php, который используется для подключения приложения из базы данных и добавьте в него следующий код:
<?php
$hName='localhost'; // host name
$uName='root'; // database user name
$password=''; // database password
$dbName = "demo"; // database name
$dbCon = mysqli_connect($hName,$uName,$password,"$dbName");
if(!$dbCon){
die('Could not Connect MySql Server:' .mysql_error());
}
?>Шаг 3 - Получить все данные из базы данных и отобразить в таблице HTML
Теперь вам нужно создать файл Index.php и добавить в него следующий код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Insert Update Delete in PHP On Same Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-2">
<div class="row">
<div class="col-md-8 mt-1 mb-1">
<h2 class="text-white bg-dark">Insert Update Delete in PHP On Same Page</h2>
</div>
<div class="col-md-8 mt-1 mb-2"><button type="button" id="addNewUser" class="btn btn-success">Add</button></div>
<div class="col-md-8">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Email</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
include 'db.php';
$query = "select * from users limit 150";
$result = mysqli_query($dbCon, $query);
?>
<?php if ($result->num_rows > 0) : ?>
<?php while ($array = mysqli_fetch_row($result)) : ?>
<tr>
<th scope="row"><?php echo $array[0]; ?></th>
<td><?php echo $array[1]; ?></td>
<td><?php echo $array[2]; ?></td>
<td><?php echo $array[3]; ?></td>
<td>
<a href="jаvascript:void(0)" class="btn btn-primary edit" data-id="<?php echo $array[0]; ?>">Edit</a>
<a href="jаvascript:void(0)" class="btn btn-primary delete" data-id="<?php echo $array[0]; ?>">Delete</a>
</tr>
<?php endwhile; ?>
<?php else : ?>
<tr>
<td colspan="3" rowspan="1" headers="">No Data Found</td>
</tr>
<?php endif; ?>
<?php mysqli_free_result($result); ?>
</tbody>
</table>
</div>
</div>
</div>
<!-- boostrap model -->
<div class="modal fade" id="user-model" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="userModel"></h4>
</div>
<div class="modal-body">
<form action="jаvascript:void(0)" id="userInserUpdateForm" name="userInserUpdateForm" class="form-horizontal" method="POST">
<input type="hidden" name="id" id="id">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">First Name</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" value="" maxlength="50" required="">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Age</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="age" name="age" placeholder="Enter Age" value="" maxlength="50" required="">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-12">
<input type="email" class="form-control" id="email" name="email" placeholder="Enter Email" value="" required="">
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" id="btn-save" value="addNewUser">Save changes
</button>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- end bootstrap model -->
<script type="text/jаvascript">
$(document).ready(function($) {
$('#addNewUser').click(function() {
$('#userInserUpdateForm').trigger("reset");
$('#userModel').html("Add New User");
$('#user-model').modal('show');
});
$('body').on('click', '.edit', function() {
var id = $(this).data('id');
// ajax
$.ajax({
type: "POST",
url: "edit.php",
dаta: {
id: id
},
dataType: 'json',
success: function(res) {
$('#userModel').html("Edit User");
$('#user-model').modal('show');
$('#id').val(res.id);
$('#name').val(res.name);
$('#age').val(res.age);
$('#email').val(res.email);
}
});
});
$('body').on('click', '.delete', function() {
if (confirm("Delete Record?") == true) {
var id = $(this).data('id');
// ajax
$.ajax({
type: "POST",
url: "delete.php",
dаta: {
id: id
},
dataType: 'json',
success: function(res) {
$('#name').html(res.name);
$('#age').html(res.age);
$('#email').html(res.email);
window.location.reload();
}
});
}
});
$('#userInserUpdateForm').submit(function() {
// ajax
$.ajax({
type: "POST",
url: "insert-update.php",
dаta: $(this).serialize(), // get all form field value in
dataType: 'json',
success: function(res) {
window.location.reload();
}
});
});
});
</script>
</body>
</html>Обратите внимание, что код файла index.php будет отображать список всех пользователей из базы данных. А также вставлять и редактировать данные из базы данных mysql с использованием Bootstrap и ajax.
Шаг 4 - Редактировать данные из базы данных
На этом этапе создайте файл edit.php, чтобы получить данные отдельной записи из базы данных mysql. Итак, добавьте в edit.php следующий код:
<?php
include "db.php";
$id = $_POST['id'];
$query="SELECT * from users WHERE id = '" . $id . "'";
$result = mysqli_query($dbCon,$query);
$cust = mysqli_fetch_array($result);
if($cust) {
echo json_encode($cust);
} else {
echo "Error: " . $sql . "" . mysqli_error($dbCon);
}
?>Шаг 5 - Вставка и обновление данных в базе данных
На этом этапе вставьте и добавьте данные из базы данных mysql. Итак, создайте файл insert-update.php для вставки и обновления данных записи из базы данных mysql и добавьте в insert-update.php следующий код:
<?php
if(count($_POST)>0) {
include 'db.php';
$name = $_POST['name'];
$age = $_POST['age'];
$email = $_POST['email'];
if(empty($_POST['id'])){
$query = "INSERT INTO users (name,age,email)
VALUES ('$name','$age','$email')";
}else{
$query = "UPDATE users set id='" . $_POST['id'] . "', name='" . $_POST['name'] . "', age='" . $_POST['age'] . "', email='" . $_POST['email'] . "' WHERE id='" . $_POST['id'] . "'";
}
$res = mysqli_query($dbCon, $query);
if($res) {
echo json_encode($res);
} else {
echo "Error: " . $sql . "" . mysqli_error($dbCon);
}
}
?>Шаг 6 - Удалить данные из базы данных
Последний шаг, удалите данные из базы данных mysql. Итак, создайте файл delete.php, который удаляет данные из базы данных mysql. Теперь вам нужно добавить следующий код в файл delete.php:
<?php
include 'db.php';
$id = $_POST['id'];
$query = "DELETE FROM users WHERE id='" . $id . "'";
$res = mysqli_query($dbCon, $query);
if($res) {
echo json_encode($res);
} else {
echo "Error: " . $sql . "" . mysqli_error($dbCon);
}
?>
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.