数据不通过管理页面中的 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();
            }
         });
    });

插入查询

 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 hook

注册你的脚本

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();
            }
         });
    });

与更新功能相同，仅添加参考 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();
            }
         });
    });

在更新查询中，我在错误的位置添加了括号。

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" );