数据不插入和更新通过ajax和jQuery在管理页面?

Question

我做了自定义插件并做了crud操作，在管理页面显示所有数据，使用ajax和jquery。数据已成功删除，但未插入或更新。数据通过ajax成功传递，但未插入。我也看到如果输入块是空的，我把一些数据和更新它。它得到了第一行数据。
错误- https://prnt.sc/wnzqjr
ajax插入数据

<tr>
<td><?php echo $q ?></td>
<td>
<input type="text" name="question" class="question"  value="<?php echo $print->question ?>" ></td>
<td>
<input type="text" name="answer" class="answer"  value="<?php echo $print->answer ?>" > </td>
<td>
<input type="button" value="Insert" id="insert" data-id = "<?php echo $print->id ?>" name="insert" class="ins_btn">
</td>
<td>
<input type="button" value="Update" id="update" data-id = "<?php echo $print->id ?>" name="update" class="upd_btn">
</td>
<td>
<input type="button" value="Delete" id="delete" data-id = "<?php echo $print->id ?>" name="delete" class="del_btn">
</td>
</tr>

jQuery('.ins_btn').click(function(){
var id = jQuery(this).attr('data-id');
var question = jQuery('#question').val();
var answer = jQuery('#answer').val();
// alert(id);
$.ajax({
url: '<?php echo admin_url('admin-ajax.php');?>', 
type: 'POST',
data:{ 
action: 'insert_records', 
insert_record : id,
insert_question: question,
insert_answer: answer
},
success: function( data ){
alert("Records are successfully insert");
location.reload();
}
});
});

insert查询

function insert_records(){
global $wpdb;
$id = $_POST['insert_record'];
$question = $_POST['insert_question'];
$answer = $_POST['insert_answer'];

$db_inserted = $wpdb->insert( $wpdb->prefix.'faqq', 
array( 'ID' => $id, 
'question' => $question, 
'answer' => $answer) 
);
}
add_action( "wp_ajax_insert_records", "insert_records" );
add_action( "wp_ajax_nopriv_insert_records", "insert_records" );

ajax用于更新数据

jQuery('.upd_btn').click(function(){
var id = jQuery(this).attr('data-id');
var question = jQuery('#question').val();
var answer = jQuery('#answer').val();
alert(question);
$.ajax({
url: '<?php echo admin_url('admin-ajax.php');?>', 
type: 'POST',
data:{ 
action: 'update_records', 
update_record : id,
update_question : question,
update_answer : answer
},
success: function( data ){
alert("Records are successfully updated");
location.reload();
}
});
});

更新查询

function update_records(){
global $wpdb;
// $table_name = $wpdb->prefix.'faqq';
$id = $_POST['update_record'];
$question = $_POST['update_question'];
$answer = $_POST['update_answer'];
$db_updated = $wpdb->update( $wpdb->prefix.'faqq', 
array('question'    => $question,
'answer'   => $answer, array( 'ID' => $id ) )
); 
}

有一些错误。1)通过ajax更新数据时出现错误- https://prnt.sc/wnymkx, https://prnt.sc/wnyos5, https://prnt.sc/wnyuhk

Answer 1

问题可能是你的循环，这是创建列表显示在管理页面上导致多个元素具有相同的id，当id属性必须是唯一的DOM。要解决这个问题，可以在循环中的元素上使用公共类，然后在单击按钮时遍历DOM以查找它们。

像这样更改显示代码块:

$mysql = Database::DBCon()->prepare('SELECT * FROM table_name');
$mysql->execute();
while ($fetch = $mysql->fetch(PDO::FETCH_ASSOC)){
$html = '<tr>
<td><input type="text" value="'. $fetch['question'] .'" class="question"></td>
<td><input type="text" value="'. $fetch['answer'] .'" class="answer"></td>
<td>
<button type="button" class="btn btn-danger insert-btn" data-id="'. $fetch['ID'] .'">Insert</button>
<button type="button" class="btn btn-warning update-btn" data-id="'. $fetch['ID'] .'">Update</button></td>
</tr>';
//echo $html;
}

然后将函数的实现更改为如下内容:

$(document).ready(function() {
$(document).on('click', '.update-btn', function() {
var $row = $(this).closest('tr');
var id = $(this).data('id');
var question= $row.find('.question').val();
var answer = $row.find('.answer').val();
// ajax request here...
});
})

Answer 2

我想你忘了在jQuery编写的脚本文件中排队。这就是它显示的脚本调用错误你应该注册你的脚本admin_enque_script钩

Answer 3

不需要id字段插入数据，所以我删除了它。我将类用于问题和答案字段。

jQuery('.ins_btn').click(function(){
var question = jQuery(this).closest('tr').find('.question').val();
var answer = jQuery(this).closest('tr').find('.answer').val();
// alert(question);
$.ajax({
url: '<?php echo admin_url('admin-ajax.php');?>',  
type: 'POST',
data:{ 
action          : 'insert_records', 
insert_question : question,
insert_answer   : answer
},
success: function( data ){
location.reload();
}
});
});

与update函数相同，只增加引用id字段。因为要更新数据，引用Id很重要。

jQuery('.upd_btn').click(function(){
var id = jQuery(this).attr('data-id');
var question = jQuery(this).closest('tr').find('.question').val();
var answer = jQuery(this).closest('tr').find('.answer').val();

$.ajax({
url: '<?php echo admin_url('admin-ajax.php');?>', 
type: 'POST',
data:{ 
action: 'update_records', 
update_record : id,
update_question : question,
update_answer : answer
},
success: function( data ){
location.reload();
}
});
});

在update query中，我在错误的位置添加了括号。

function update_records(){
global $wpdb;
// echo "<pre>"; print_r($_POST);
// die();    
// $table_name = $wpdb->prefix.'faqq';
$id = $_POST['update_record'];
$question = $_POST['update_question'];
$answer = $_POST['update_answer'];
$db_updated = $wpdb->update( $wpdb->prefix.'faqq', 
array('question'    => $question,
'answer'   => $answer
),
array( 'ID' => $id ) 
);
// $wpdb->query($wpdb->prepare("UPDATE $table_name SET question = '$question', answer = '$answer' WHERE id = $id"));
}
add_action( "wp_ajax_update_records", "update_records" );   //update_records is action
add_action( "wp_ajax_nopriv_update_records", "update_records" );