Hướng dẫn ajax php delete row - ajax php xóa hàng


Ở đây chúng tôi sử dụng 3 tệp để xóa dữ liệu khỏi cơ sở dữ liệu MySQL bằng AJAX.

Nội dung chính

  • Tạo cơ sở dữ liệu
  • Tạo chỉ mục HTML
  • Xóa chức năng PHP
  • Ajax Xóa chức năng
  • Làm thế nào để xóa dữ liệu khỏi cơ sở dữ liệu trong AJAX?
  • Làm thế nào để xóa một hàng bằng Ajax?
  • Làm cách nào để xóa dữ liệu mà không cần làm mới trang bằng Ajax?
  • Làm cách nào để chèn Xóa cập nhật trong PHP trên cùng một trang bằng cách sử dụng bảng AJAX và cập nhật trong PHP?

  1. database.php
  2. delete_ajax.php
  3. view.php

Bảng user_data

CREATE TABLE `crud` (
  `id` int(11) NOT NULL,
  `name` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  `phone` varchar(100) NOT NULL,
  `city` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

database.php

<?php
	$servername = "localhost";
	$username = "root";
	$password = "";
	$db="school";
	/* Create connection */
	$conn = mysqli_connect($servername, $username, $password,$db);
?>
    

delete_ajax.php

 <?php
	include 'database.php';
	$id=$_POST['id'];
	$sql = "DELETE FROM `crud` WHERE id=$id";
	if (mysqli_query($conn, $sql)) {
		echo json_encode(array("statusCode"=>200));
	} 
	else {
		echo json_encode(array("statusCode"=>201));
	}
	mysqli_close($conn);
?>

view.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>View Ajax</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.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>View data</h2>
	<table class="table table-bordered table-sm" >
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
		<th>City</th>
		<th>Action</th>
      </tr>
    </thead>
    <tbody id="table">
      
    </tbody>
  </table>
</div>
<script>
$(document).ready(function() {
	$.ajax({
		url: "View_ajax.php",
		type: "POST",
		cache: false,
		success: function(dataResult){
			$('#table').html(dataResult); 
		}
	});
	$(document).on("click", ".delete", function() { 
		var $ele = $(this).parent().parent();
		$.ajax({
			url: "delete_ajax.php",
			type: "POST",
			cache: false,
			data:{
				id: $(this).attr("data-id")
			},
			success: function(dataResult){
				var dataResult = JSON.parse(dataResult);
				if(dataResult.statusCode==200){
					$ele.fadeOut().remove();
				}
			}
		});
	});
});
</script>
</body>
</html>

Hướng dẫn ajax php delete row - ajax php xóa hàng


Trong hướng dẫn này, bạn sẽ tìm hiểu cách xóa dữ liệu trong PHP & MySQL bằng AJAX, chúng tôi biết rằng đây là một chức năng phổ biến khi tạo phần mềm. Vì vậy, tôi hy vọng rằng bạn sẽ học hỏi từ phương pháp đơn giản này và sử dụng nó trong dự án tương lai của bạn.delete data in PHP & MySQL using ajax we know that this is a common function when creating software. So I hope that you will learn from this simple method and use it in your future project.delete data in PHP & MySQL using ajax we know that this is a common function when creating software. So I hope that you will learn from this simple method and use it in your future project.

Với sự trợ giúp của AJAX, chúng tôi được phép yêu cầu máy chủ xóa một bản ghi cụ thể mà không tải lại trang của chúng tôi và tự động xóa hồ sơ của chúng tôi trong danh sách. Vì vậy, để bạn hiểu, chúng tôi sử dụng cơ sở dữ liệu nhân viên đơn giản để xóa bản ghi.

Tạo cơ sở dữ liệu

Tạo chỉ mục HTML

CREATE TABLE `employees` (
  `id` int(10) NOT NULL,
  `email` varchar(100) NOT NULL,
  `first_name` varchar(100) NOT NULL,
  `last_name` varchar(100) NOT NULL,
  `address` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

ALTER TABLE `employees`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `employees`
  MODIFY `id` int(10) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
COMMIT;

Xóa chức năng PHP

Tạo chỉ mục HTML

Xóa chức năng PHP

<!doctype html>
<html lang="en">
<head>
  	<title>Delete Data in PHP & MySQL Using Ajax</title>

  	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  	
  	<!-- Page CSS -->
  	<link rel="stylesheet" href="assets/css/styles.css">
</head>
  
<body>
   
	<div class="container">

		<br><br>

	    <h2>Delete Data in PHP & MySQL Using Ajax</h2>

	    <br><br>
	    
	    <div class="row">
	    	<div class="col-md-4">
	    		<h3>Add New Employee</h3>

			    <form action="save.php" id="form">
			    	<div class="form-group">
					    <label for="email">Email</label>
					    <input class="form-control" type="text" name="email">
				  	</div>
				  	<div class="form-group">
					    <label for="first_name">First Name</label>
					    <input class="form-control" type="text" name="first_name">
				  	</div>
				  	<div class="form-group">
					    <label for="last_name">Last Name</label>
					    <input class="form-control" type="text" name="last_name">
				  	</div>
				  	<div class="form-group">
					    <label for="address">Address</label>
					    <textarea class="form-control" type="text" name="address" rows="3"></textarea>
				  	</div>
				  	<button type="button" class="btn btn-primary" id="btnSubmit">Submit</button>
				</form>
	    	</div>

	    	<div class="col-md-8">
	    		<h3>List of Employees</h3>
	    		<div id="employees-list"></div>
	    	</div>
	    </div>
	</div>

	<!-- The Modal -->
	<div class="modal" id="edit-employee-modal">
	  	<div class="modal-dialog">
		    <div class="modal-content">

		      	<!-- Modal Header -->
		      	<div class="modal-header">
			        <h4 class="modal-title">Edit Employee</h4>
			        <button type="button" class="close" data-dismiss="modal">&times;</button>
		      	</div>

		      	<!-- Modal body -->
		      	<div class="modal-body">
		        	<form action="update.php" id="edit-form">
		        		<input class="form-control" type="hidden" name="id">
				    	<div class="form-group">
						    <label for="email">Email</label>
						    <input class="form-control" type="text" name="email">
					  	</div>
					  	<div class="form-group">
						    <label for="first_name">First Name</label>
						    <input class="form-control" type="text" name="first_name">
					  	</div>
					  	<div class="form-group">
						    <label for="last_name">Last Name</label>
						    <input class="form-control" type="text" name="last_name">
					  	</div>
					  	<div class="form-group">
						    <label for="address">Address</label>
						    <textarea class="form-control" type="text" name="address" rows="3"></textarea>
					  	</div>
					  	<button type="button" class="btn btn-primary" id="btnUpdateSubmit">Update</button>
					  	<button type="button" class="btn btn-danger float-right" data-dismiss="modal">Close</button>
					</form>


		      	</div>

		    </div>
	  	</div>
	</div>


	<!-- Must put our javascript files here to fast the page loading -->
	
	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<!-- Bootstrap JS -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	<!-- Page Script -->
	<script src="assets/js/scripts.js"></script>

</body>
  
</html>

Xóa chức năng PHP

Ajax Xóa chức năng

<?php
	$request = $_REQUEST; //a PHP Super Global variable which used to collect data after submitting it from the form
	$id = $request['employee_id']; //employee ID we are using it to get the employee record

	$servername = "localhost"; //set the servername
	$username = "root"; //set the server username
	$password = ""; // set the server password (you must put password here if your using live server)
	$dbname = "demos"; // set the table name

	$mysqli = new mysqli($servername, $username, $password, $dbname);

	if ($mysqli->connect_errno) {
	  echo "Failed to connect to MySQL: " . $mysqli->connect_error;
	  exit();
	}

	// Set the DELETE SQL data
	$sql = "DELETE FROM employees WHERE id='".$id."'";

	// Process the query so that we will save the date of birth
	if ($mysqli->query($sql)) {
	  echo "Employee has been successfully deleted.";
	} else {
	  echo "Error: " . $sql . "<br>" . $mysqli->error;
	}

	// Close the connection after using it
	$mysqli->close();
?>

Ajax Xóa chức năng

Làm thế nào để xóa dữ liệu khỏi cơ sở dữ liệu trong AJAX?

function del() 
{
	$(document).delegate(".btn-delete-employee", "click", function() {

		if (confirm("Are you sure you want to delete this record?")) {
		    var employeeId = $(this).attr('data-id'); //get the employee ID

		    // Ajax config
			$.ajax({
		        type: "GET", //we are using GET method to get data from server side
		        url: 'delete.php', // get the route value
		        data: {employee_id:employeeId}, //set data
		        beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
		            
		        },
		        success: function (response) {//once the request successfully process to the server side it will return result here
		            // Reload lists of employees
	            	all();

		            alert(response)
		        }
		    });
		}
	});
}

Làm thế nào để xóa một hàng bằng Ajax?

$(document).ready(function() {
	// Delete record via ajax
	del();
});

Làm cách nào để xóa dữ liệu mà không cần làm mới trang bằng Ajax?

Làm cách nào để chèn Xóa cập nhật trong PHP trên cùng một trang bằng cách sử dụng bảng AJAX và cập nhật trong PHP?

Bảng user_data Kindly don't use this code example as is, do some research also about how to secure your PHP code like SQL Injection and CSRF attacks. And before deleting the record you need to sanitize the submitted ID so that it will safe when querying it to your database. You must also check the ID if existing in your database before deleting the record.

database.php

Làm thế nào để xóa dữ liệu khỏi cơ sở dữ liệu trong AJAX?

Làm thế nào để xóa một hàng bằng Ajax?pass the record id from AJAX which needs to delete. In the example, I am creating the HTML table which shows the list of records with a delete button. When the button gets clicked then remove the record and also remove the HTML table row with fadeOut() effect.

Làm thế nào để xóa một hàng bằng Ajax?

Làm cách nào để xóa dữ liệu mà không cần làm mới trang bằng Ajax? php', data:del_id, success: function(data){ if(data=="YES"){ $ele. fadeOut(). remove(); }else{ alert("can't delete the row") } } }) });

Làm cách nào để xóa dữ liệu mà không cần làm mới trang bằng Ajax?

Làm cách nào để chèn Xóa cập nhật trong PHP trên cùng một trang bằng cách sử dụng bảng AJAX và cập nhật trong PHP?.

Bảng user_data

database.php

Trong hướng dẫn này, bạn sẽ tìm hiểu cách xóa dữ liệu trong PHP & MySQL bằng AJAX, chúng tôi biết rằng đây là một chức năng phổ biến khi tạo phần mềm. Vì vậy, tôi hy vọng rằng bạn sẽ học hỏi từ phương pháp đơn giản này và sử dụng nó trong dự án tương lai của bạn.delete data in PHP & MySQL using ajax we know that this is a common function when creating software. So I hope that you will learn from this simple method and use it in your future project.

Với sự trợ giúp của AJAX, chúng tôi được phép yêu cầu máy chủ xóa một bản ghi cụ thể mà không tải lại trang của chúng tôi và tự động xóa hồ sơ của chúng tôi trong danh sách. Vì vậy, để bạn hiểu, chúng tôi sử dụng cơ sở dữ liệu nhân viên đơn giản để xóa bản ghi.

Vì vậy, trước tiên hãy tạo tên cơ sở dữ liệu của bạn cho bất cứ điều gì bạn muốn. Sau khi tạo cơ sở dữ liệu của bạn thì bạn sẽ cần tạo bảng "nhân viên" của chúng tôi. Vui lòng kiểm tra mã bên dưới để biết ví dụ SQL.

Hãy lưu ý rằng bạn có thể thêm bảng của mình từ dòng lệnh MySQL hoặc trong phpmyadmin để có trải nghiệm tốt hơn. Nó phụ thuộc vào bạn.

Trong phần này, chúng tôi sẽ tạo chỉ mục.html của chúng tôi và đặt mã này bên dưới.

Làm cách nào để chèn Xóa cập nhật trong PHP trên cùng một trang bằng cách sử dụng bảng AJAX và cập nhật trong PHP?

Bảng user_data.

Bước 1 - Tạo cơ sở dữ liệu.....

Bước 2 - Kết nối với cơ sở dữ liệu bằng PHP.....

Bước 3 - Lấy tất cả dữ liệu từ cơ sở dữ liệu và hiển thị trong bảng HTML.....

Bước 4 - Chỉnh sửa dữ liệu từ cơ sở dữ liệu.....

Bước 5 - Chèn và cập nhật dữ liệu vào cơ sở dữ liệu ..