使用 php 和 sql 的 Ajax 弹出视图更新数据

Posted 2023-03-23

技术标签:

【中文标题】使用 php 和 sql 的 Ajax 弹出视图更新数据【英文标题】：Ajax popup view update data using php with sql 【发布时间】：2020-04-16 05:28:44 【问题描述】：

所以我已经尝试解决这个问题好几个小时了。任何帮助，将不胜感激主页-index.php

 <?php 
include 'conn.php';
$query = "SELECT * FROM ordersdata ORDER BY id DESC";
$result = mysqli_query($connect, $query);
?>

<!doctype html > 
<html>
<head>
    <title> CRUD Server </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>

<br /><br />  
<div class="container">  
<h3 align="center">Responsive CRUD</h3>
<br />  
<br />
<h4 align="center">Customer Order Management</h4>
<div id="orders_table">  
<table class="table table-striped">
<tr>  
<th >Product Name</th>
<th >Product Weight</th>
<th >Product Quantity</th>
<th >Product Price</th>
<th  class="text-center">Edit</th>
<th  class="text-center">View Details</th>
</tr>  
<?php  
while($row = mysqli_fetch_array($result))  
  
?>  
<tr>  
<td><?php echo $row["pname"]; ?></td>  
<td><?php echo $row["pweight"]; ?></td>
<td><?php echo $row["pqty"]; ?></td>
<td><?php echo $row["pprice"]; ?></td>
<td class="text-center"><input type="button" name="edit" value="Edit" id="<?php echo $row["oid"]; ?>" class="btn btn-info edit_data" /></td>  
<td class="text-center"><input type="button" name="view" value="view" id="<?php echo $row["id"]; ?>" class="btn btn-success view_data" /></td>  
</tr>  
<?php  
  
?>  
</table>  
</div>  
</div>  
</div> 
<!-- order Details -->
<div id="dataModal" class="modal fade">  
<div class="modal-dialog">  
<div class="modal-content">  
<div class="modal-header">  
<h4 class="modal-title">Order Details</h4>  
<button type="button" class="close" data-dismiss="modal">&times;</button>  
</div>  
<div class="modal-body" id="order_detail">  
</div>  
<div class="modal-footer">  
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>  
</div>  
</div>  
</div>  
</div>  
<!-- /orders Details -->
<!-- PHP Ajax Update MySQL Data Through Bootstrap Modal -->
<div id="add_data_Modal" class="modal fade">  
<div class="modal-dialog">  
<div class="modal-content">  
<div class="modal-header">  
<h4 class="modal-title">Orders details</h4>  
<button type="button" class="close" data-dismiss="modal">&times;</button>  
</div> 
 <!-- main shit -->
<div class="modal-body">  
<form method="post" id="insert_form">  

<label>Select Status</label>  
<select name="ostatus" id="ostatus" class="form-control">  
<option value="0">0</option>  
<option value="1">1</option>  
<option value="2">2</option>  
<option value="3">3</option>  
</select>  
<br />  

<input type="hidden" name="order_id" id="order_id" />  
<input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />  
</form>  
</div>  

<div class="modal-footer">  
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>  
</div>  
</div>  
</div>  
</div> 
<!-- / PHP Ajax Update MySQL Data Through Bootstrap Modal -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>     
<script>  
$(document).ready(function() 
$('#add').click(function() 
$('#insert').val("Insert");
$('#insert_form')[0].reset();
);
$(document).on('click', '.edit_data', function() 
var order_oid = $(this).attr("oid");
$.ajax(
url: "fetch.php",
method: "POST",
data: 
    order_oid: order_oid
,
dataType: "json",
success: function(data) 
$('#pname').val(data.pname);
$('#pweight').val(data.pweight);
$('#pqty').val(data.pqty);
$('#pprice').val(data.pprice);
$('#insert').val("Update");
$('#add_data_Modal').modal('show');

);
);
$('#insert_form').on("submit", function(event) 
event.preventDefault();
if ($('#pname').val() == "") 
alert("Order Name required");
 else if ($('#pweight').val() == '') 
alert("product weight");
 else if ($('#pqty').val() == '') 
alert("product quantity");
 else if ($('#pprice').val() == '') 
alert("product price");
 else 
$.ajax(
url: "insert.php",
method: "POST",
data: $('#insert_form').serialize(),
beforeSend: function() 
$('#insert').val("Inserting");
,
success: function(data) 
$('#insert_form')[0].reset();
$('#add_data_Modal').modal('hide');
$('#orders_table').html(data);

);

);
$(document).on('click', '.view_data', function() 
var order_id = $(this).attr("id");
if (order_id != '') 
$.ajax(
url: "select.php",
method: "POST",
data: 
order_id: order_id
,
success: function(data) 
$('#order_detail').html(data);
$('#dataModal').modal('show');

);

);
);
</script>
</body>
</html>

conn.php

<?php
$connect = mysqli_connect("localhost", "dummy", "123456", "www") or die ('I cannot connect to the database  because: ' . mysql_error())
?>

插入.php

<?php  
include 'conn.php'; // MySQL Connection
if(!empty($_POST))  
  
$output = '';  
$message = '';  
$ostatus = mysqli_real_escape_string($connect, $_POST["ostatus"]);  

if($_POST["order_oid"] != '')  
  
$query = "  
UPDATE orders
SET ostatus='$ostatus',   
WHERE oid='".$_POST["order_oid"]."'";  
$message = 'Data Updated';  
  
else  
  
$query = "  
INSERT INTO orders(ostatus)  
VALUES('$ostatus');  
";  
$message = 'Added Record Successfully';  
  
if(mysqli_query($connect, $query))  
  
$output .= '<label class="text-success">' . $message . '</label>';  
$select_query = "SELECT * FROM orders ORDER BY id DESC";  
$result = mysqli_query($connect, $select_query);  
$output .= '  
<table class="table table-bordered">  
<tr>  
<th >Customer Name</th>
<th >Customer Address</th>
<th >Customer Mobile</th>
<th >Payment Method</th>
<th >Order Status</th>
<th >Edit</th>  
<th >View</th>  
</tr>  
';  
while($row = mysqli_fetch_array($result))  
  
$output .= '  
<tr>  
<td><?php echo $row["oname"]; ?></td>  
<td><?php echo $row["odeladd"]; ?></td>
<td><?php echo $row["omobile"]; ?></td>
<td><?php echo $row["opaymethod"]; ?></td>
<td><?php echo $row["ostatus"]; ?></td>
<td><input type="button" name="edit" value="Edit" id="'.$row["oid"] .'" class="btn btn-info btn-xs edit_data" /></td>  
<td><input type="button" name="view" value="view" id="' . $row["id"] . '" class="btn btn-info btn-xs view_data" /></td>  
</tr>  
';  
  
$output .= '</table>';  
  
echo $output;  
  
?>

select.php

<?php
if (isset($_POST["order_id"])) 
$output = '';
include 'conn.php'; // MySQL Connection
$query  = "SELECT * FROM ordersdata WHERE id = '" . $_POST["order_id"] . "'";
$result = mysqli_query($connect, $query);
$output .= '  
<div class="table-responsive">  
<table class="table table-striped">';
while ($row = mysqli_fetch_array($result)) 
$output .= '  
<tr>  
<td ><label>pname</label></td>  
<td >' . $row["pname"] . '</td>  
</tr>  
<tr>  
<td ><label>pweight</label></td>  
<td >' . $row["pweight"] . '</td>  
</tr>  
<tr>  
<td ><label>pqty</label></td>  
<td >' . $row["pqty"] . '</td>  
</tr>  
<tr>  
<td ><label>pprice</label></td>  
<td >' . $row["pprice"] . '</td>  

</tr>  
';

$output .= '  
</table>  
</div>  
';
echo $output;

?>

有两个名为 orders 和 ordersdata 的表，它们都有 oid 作为公共列。两者都在同一个名为 www 的数据库中。当我单击编辑按钮时，应该显示 ajax 弹出窗口，但事实并非如此。现在我从编辑中获取 oid，从视图中获取 id。为我已传递 order_oid 的 edit_data 和我已传递 order_id 的 view_data 调用插入页面。非常感谢您的帮助。

【问题讨论】：

【参考方案1】：

你应该打电话

$('#add_data_Modal').modal('show');

这样，

$(document).on('click', '.edit_data', function() 
var order_oid = $(this).attr("id");
$('#add_data_Modal').modal('show');

我认为，.attr("oid"); (var order_oid) 作为未定义传递，您应该将其更改为 .attr("id");

【讨论】：

以上是关于使用 php 和 sql 的 Ajax 弹出视图更新数据的主要内容，如果未能解决你的问题，请参考以下文章

DataTables + PHP/AJAX - 在显示之前操作结果

php 添加了一个手机到AJAX登录和注册模式弹出PRO

使用 ajax、sql 和 php 的动态下拉列表

使用 jQuery Ajax 和 PHP 更新 SQL 数据库

使用 PHP 和 Ajax 创建动态表以将数据插入表中，如果不在视图或第一页中，则无法使用按钮

Laravel 4 如何使用 ajax 和 json 返回多个视图数据？