我的程序在我向表(在Php myadmin中(和代码中添加了额外的列后停止显示tabledata。我无法读取、更新和删除存储在数据库中的表数据。
当我添加更多字段(而不是名字，姓氏，我添加出生日期，电话号码等(时，问题就开始了。
我一遍又一遍地检查不一致(在 Id 引用、名称引用和变量名称中(，但我找不到缺陷。下面是我的索引.php文件中的代码。
<body>
<div class="container box">
<h1 align="center">Recente aanmeldingen</h1>
<br />
<div align="right">
<button type="button" id="modal_button" class="btn btn-info">Nieuwe aanmelding</button>
<!-- It will show Modal for Create new Records !-->
</div>
<br />
<div id="result" class="table-responsive"> <!-- Data will load under this tag!-->
</div>
</div>
</body>
</html>
<!-- This is Customer Modal. It will be use for Create new Records and Update Existing Records!-->
<div id="customerModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Nieuwe aanmelding toevoegen</h4>
</div>
<div class="modal-body">
<label>Voornaam</label>
<input type="text" name="voornaam" id="voornaam" class="form-control" />
<br />
<label>Achternaam</label>
<input type="text" name="achternaam" id="achternaam" class="form-control" />
<br />
<label>Geslacht</label>
<input type="text" name="geslacht" id="geslacht" class="form-control" />
<br />
<label>Email-adres</label>
<input type="text" name="email_adres" id="email_adres" class="form-control" />
<br />
<label>Telefoon</label>
<input type="text" name="telefoonnummer" id="telefoonnummer" class="form-control" />
<br />
<label>Geboortedatum</label>
<input type="text" name="geboortedatum" id="geboortedatum" class="form-control" />
<br />
</div>
<div class="modal-footer">
<input type="hidden" name="customer_id" id="customer_id" />
<input type="submit" name="action" id="action" class="btn btn-success" />
<button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
fetchUser(); //This function will load all data on web page when page load
function fetchUser() // This function will fetch data from table and display under <div id="result">
{
var action = "Load";
$.ajax({
url : "action.php", //Request send to "action.php page"
method:"POST", //Using of Post method for send data
data:{action:action}, //action variable data has been send to server
success:function(data){
$('#result').html(data); //It will display data under div tag with id result
}
});
}
//This JQuery code will Reset value of Modal item when modal will load for create new records
$('#modal_button').click(function(){
$('#customerModal').modal('show'); //It will load modal on web page
$('#voornaam').val(''); //This will clear Modal first name textbox
$('#achternaam').val(''); //This will clear Modal last name textbox
$('#geslacht').val(''); //This will clear Modal geslacht textbox
$('#email_adres').val(''); //This will clear Modal email textbox
$('#telefoonnummer').val(''); //This will clear Modal telefoon textbox
$('#geboortedatum').val(''); //This will clear Modal geboortedatum textbox
$('.modal-title').text("Nieuwe record aanmaken"); //It will change Modal title to Create new Records
$('#action').val('Aanmaken'); //This will reset Button value ot Create
});
//This JQuery code is for Click on Modal action button for Create new records or Update existing records. This code will use for both Create and Update of data through modal
$('#action').click(function(){
var voornaam = $('#voornaam').val(); //Get the value of first name textbox.
var achternaam = $('#achternaam').val(); //Get the value of last name textbox
var geslacht = $('#geslacht').val();
var email = $('#email_adres').val();
var telefoon = $('#telefoonnummer').val();
var geboortedtm = $('#geboortedatum').val();
var id = $('#customer_id').val(); //Get the value of hidden field customer id
var action = $('#action').val(); //Get the value of Modal Action button and stored into action variable
if(voornaam != '' && achternaam != '' && geslacht != '' && email != '' && telefoon != '' && geboortedtm != '') //This condition will check both variable has some value
{
$.ajax({
url : "action.php", //Request send to "action.php page"
method:"POST", //Using of Post method for send data
data:{voornaam:voornaam, achternaam:achternaam, geslacht:geslacht, email:email, telefoon:telefoon, geboortedtm:geboortedtm, id:id, action:action}, //Send data to server
success:function(data){
alert(data); //It will pop up which data it was received from server side
$('#customerModal').modal('hide'); //It will hide Customer Modal from webpage.
fetchUser(); // Fetch User function has been called and it will load data under divison tag with id result
}
});
}
else
{
alert("Alle velden zijn vereist"); //If both or any one of the variable has no value them it will display this message
}
});
//This JQuery code is for Update customer data. If we have click on any customer row update button then this code will execute
$(document).on('click', '.update', function(){
var id = $(this).attr("id"); //This code will fetch any customer id from attribute id with help of attr() JQuery method
var action = "Select"; //We have define action variable value is equal to select
$.ajax({
url:"action.php", //Request send to "action.php page"
method:"POST", //Using of Post method for send data
data:{id:id, action:action},//Send data to server
dataType:"json", //Here we have define json data type, so server will send data in json format.
success:function(data){
$('#customerModal').modal('show'); //It will display modal on webpage
$('.modal-title').text("Update Records"); //This code will change this class text to Update records
$('#action').val("Update"); //This code will change Button value to Update
$('#customer_id').val(id); //It will define value of id variable to this customer id hidden field
$('#voornaam').val(data.first_name); //It will assign value to modal first name texbox
$('#achternaam').val(data.last_name);//It will assign value of modal last name textbox
$('#geslacht').val(data.geslacht);
$('#email_adres').val(data.email_adres);
$('#telefoonnummer').val(data.telefoonnummer);
$('#geboortedatum').val(data.geboortedatum);
}
});
});
//This JQuery code is for Delete customer data. If we have click on any customer row delete button then this code will execute
$(document).on('click', '.delete', function(){
var id = $(this).attr("id"); //This code will fetch any customer id from attribute id with help of attr() JQuery method
if(confirm("Weet u zeker dat u deze record wilt verwijderen?")) //Confim Box if OK then
{
var action = "Delete"; //Define action variable value Delete
$.ajax({
url:"action.php", //Request send to "action.php page"
method:"POST", //Using of Post method for send data
data:{id:id, action:action}, //Data send to server from ajax method
success:function(data)
{
fetchUser(); // fetchUser() function has been called and it will load data under divison tag with id result
alert(data); //It will pop up which data it was received from server side
}
})
}
else //Confim Box if cancel then
{
return false; //No action will perform
}
});
});
</script>
不是 100% 确定这是否是问题所在，但在我看来，您使用 AJAX 发送的数据对象中缺少引号。取而代之的是：
data {
id: id,
action: action
}
请尝试以下操作：
data {
"id": id,
"action": action
}
希望它能解决您的问题