使用ajax和PHP提交已编辑表单的问题
当我试图对数据库的First_Name和Last_Name进行更新时,一个空表单被传递到数据库,结果没有更新任何信息。我需要帮助吗 这是到目前为止的工作。。。。 index.php使用ajax和PHP提交已编辑表单的问题,php,jquery,ajax,Php,Jquery,Ajax,当我试图对数据库的First_Name和Last_Name进行更新时,一个空表单被传递到数据库,结果没有更新任何信息。我需要帮助吗 这是到目前为止的工作。。。。 index.php <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div id="disp_data"></div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
function fetch_data()
{
$.ajax({
url:"select.php",
method:"POST",
success:function(data){
$('#disp_data').html(data);
}
});
}
fetch_data();
//edit
$(document).on('click', '#edit', function(){
var id=$(this).data("id4");
//var first_name = $('#first_name').text();
//var last_name = $('#last_name').text();
var first_name = $('#first_name').val();
var last_name = $('#last_name').val();
if(id == '')
{
alert("Id is assigned automatically..");
return false;
}
if(first_name == '')
{
alert("Enter First Name");
return false;
}
if(last_name == '')
{
alert("Enter Last Name");
return false;
}
if(confirm("Are you sure you want to edit this?"))
{
$.ajax({
url:"edit.php",
method:"POST",
data:{id:id},
dataType:"text",
success:function(data){
if(data==1) {
alert('data edited Successfully ....!');
}
fetch_data();
}
});
}
});
});
</script>
select.php
<?php
$db = new PDO (
'mysql:host=localhost;dbname=db_name;charset=utf8',
'root', // username
'' // password
);
$output = '';
$result = $db->prepare('SELECT * FROM empinfo ORDER BY id DESC');
$result->execute(array());
$count = $result->rowCount();
$output .= '
<div align="center">
<table border="1" bordercolor="#00CCCC">
<tr>
<th width="10%">Id</th>
<th width="40%">First Name</th>
<th width="40%">Last Name</th>
</tr>';
if($count > 0)
{
while($row = $result->fetch()){
$output .= '
<tr>
<td>'.$row["id"].'</td>
<td class="first_name" first_name="'.$row["first_name"].'" contenteditable>'.$row["first_name"].'</td>
<td class="last_name" first_name="'.$row["last_name"].'" contenteditable>'.$row["last_name"].'</td>
<td><button type="button" name="edit" data-id4="'.$row["id"].'" id="edit">Edit</button></td>
</tr>
';
}
$output .= '
<tr>
<td></td>
<td id="first_name" contenteditable></td>
<td id="last_name" contenteditable></td>
</tr>
';
}
else
{
$output .= '<tr>
<td colspan="4">Data not Found</td>
</tr>';
}
$output .= '</table>
</div>';
echo $output;
?>
edit.php
<?php
error_reporting(0);
$db = new PDO (
'mysql:host=localhost;dbname=chat;charset=utf8',
'root', // username
'' // password
);
$id = $_POST["id"];
$fn = $_POST["first_name"];
$ln = $_POST["last_name"];
$update1 = $db->prepare('
UPDATE empinfo set
first_name = :first_name,last_name=:last_name
WHERE id= :id');
if($update1->execute(array(
':first_name' => $fn,':last_name' => $ln,
':id' => $id))){
echo 'Data Updated';
}
?>
我看到,在您的edit.php中,您试图获取firstname和lastname值,但我们从JS部件发送它们,这导致edit.php中没有任何信息,因此我建议您将它们与ajax请求一起发送,以便获得它们:
if(confirm("Are you sure you want to edit this?"))
{
$.ajax({
url:"edit.php",
method:"POST",
data:{"id":id,"first_name":first_name,"last_name":last_name},
dataType:"text",
success:function(data){
if(data==1) {
alert('data edited Successfully ....!');
}
现在,您已经通过ajax请求发送了所需的值,因此您可以通过键入$fn=$\u POST[first\u name]在edit.php中轻松获得它们;
我希望这会有所帮助以下是一些可能会有所帮助的更新: HTML 如果我读的是正确的,那么data:{id:id}只有一个元素。因此,$\u POST只有一个索引:id。您在哪里发布您的名字和姓氏?
<div class="container">
<div id="disp_data">
<div align="center">
<table border="1" bordercolor="#00CCCC">
<tr>
<th width="10%">Id</th>
<th width="40%">First Name</th>
<th width="40%">Last Name</th>
</tr>
<tr>
<td>998</td>
<td class="first_name" data-first-name="Jane" contenteditable>Jane</td>
<td class="last_name" data-last-name="Smith" contenteditable>Smith</td>
<td>
<button type="button" class="edit_button" name="edit" data-name-id="999">Edit</button>
</td>
</tr>
<tr>
<td>999</td>
<td class="first_name" data-first-name="John" contenteditable>John</td>
<td class="last_name" data-last-name="Smith" contenteditable>Smith</td>
<td>
<button type="button" class="edit_button" name="edit" data-name-id="999">Edit</button>
</td>
</tr>
<tr>
<td></td>
<td id="first_name" contenteditable></td>
<td id="last_name" contenteditable></td>
</tr>
</table>
</div>
</div>
</div>
$(document).ready(function() {
function fetch_data() {
$.ajax({
url: "select.php",
method: "POST",
success: function(data) {
$('#disp_data').html(data);
}
});
}
fetch_data();
//edit
$(document).on('click', '.edit_button', function(e) {
var id = $(this).data("name-id");
var first_name = $(this).closest("tr").find(".first_name").val();
var last_name = $(this).closest("tr").find(".last_name").val();
if (id == '') {
alert("Id is assigned automatically..");
return false;
}
if (first_name == '') {
alert("Enter First Name");
return false;
}
if (last_name == '') {
alert("Enter Last Name");
return false;
}
if (confirm("Are you sure you want to edit this?")) {
$.ajax({
url: "edit.php",
method: "POST",
data: {
"id": id,
"first_name": first_name,
"last_name": last_name
},
dataType: "text",
success: function(data) {
if (data == 1) {
alert('data edited Successfully ....!');
}
fetch_data();
}
});
}
});
});