前端的Ajax和WordPress - 數據庫不更新

Question

所以我正在使用WordPress網站。 我在獲取用戶輸入以更新數據庫時遇到了一些困難。

JS：

var ID = $(this).attr('id');
var name = $("#name_input_"+ID).val();
var createDate = $("#created_input_"+ID).val();
var stats = $("#status_input_"+ID).val();
var dateExpire = $("#disbanded_input_"+ID).val();
var dataString = 'id=' + ID + '&name=' + name + 
'&createDate=' + createDate + '&stats=' + stats + '&dateExpire=' + dateExpire;

// can place loading image here

if (name.length > 0 || createDate.length > 0 || 
stats.length > 0 || dateExpire.length > 0) {
  $.ajax({
    type: "POST",
    url: "../edit-items.php",
    data: dataString,
    cache: false,
    error: function(xhr, status, error) {
      var err = eval("(" + xhr.responseText + ")");
      alert(err.Message);
    },
    success: function (html) {
      $("#name_"+ID).html(name);
      $("#createDate_"+ID).html(createDate);
      $("#stats_"+ID).html(stats);
      $("#dateExpire_"+ID).html(dateExpire);
    }
  });
} else {
  alert("Enter text to make an edit.");
}
});

PHP（edit-items.php）

global $wpdb;

if($_POST['id']) {
    $id = esc_sql($_POST['id']);
    $name = esc_sql($_POST['name']);
    $created = esc_sql($_POST['createDate']);
    $stats = esc_sql($_POST['stats']);
    $dateExpire = esc_sql($_POST['dateExpire']);

    $query = "UPDATE items SET itemName='$name', createDate='$created', itemStats='$stats', dateExpire='$dateExpire' WHERE committee_id='$id';"

    $wpdb->query($wpdb->prepare($query));
  }

每當我嘗試更新表時，我都可以在前端成功完成，但在刷新時，數據更改不會成功。 檢查數據庫進一步驗證數據是否未被更改...似乎“成功”是在傳遞AJAX，但由於某種原因，它不會更新數據庫。

對此有任何見解會有所幫助！

編輯決定開始使用admin-ajax.php方法。 一切都是一樣的，除了我把JS中的url: "/wp-admin/admin-ajax.php",更改為url: "/wp-admin/admin-ajax.php", edit-items.php url: "/wp-admin/admin-ajax.php",而edit-items.php的代碼現在在functions.php如下所示：

 function editCommittee() {  
  global $wpdb;

if($_POST['id']) {
    $id = esc_sql($_POST['id']);
    $name = esc_sql($_POST['name']);
    $created = esc_sql($_POST['createDate']);
    $stats = esc_sql($_POST['stats']);
    $dateExpire = esc_sql($_POST['dateExpire']);

    $wpdb->update('itemsTable',
                array(
                    'name' => $name
                ),
                array(
                    'committee_id' => $id
                ),

                array(
                  '%s'
                )
  );
  echo $id;
  exit();
  }
}
add_action('wp_ajax_editItems', 'editItems');

Answer 1

這是問題，對於我們使用的ajax請求http://example.com/wp-admin/admin-ajax.php 。
您的數據字符串也應該是cantain &action=editItems （與您在wp_ajax_editItems使用的wp_ajax_editItems ）

你ajax請求代碼應該看起來像......

  $.ajax({
    type: "POST",
    url: "/wp-admin/admin-ajax.php",
    data: dataString + '&action=editItems',
    cache: false,
    error: function(xhr, status, error) {
      var err = eval("(" + xhr.responseText + ")");
      alert(err.Message);
    },
    success: function (html) {
      $("#name_"+ID).html(name);
      $("#createDate_"+ID).html(createDate);
      $("#stats_"+ID).html(stats);
      $("#dateExpire_"+ID).html(dateExpire);
    }
  });

有關更多詳細信息，請訪問https://codex.wordpress.org/AJAX_in_Plugins

希望有幫助:)

Answer 2

好的，首先本地化你的ajaxurl對象

add_action( 'wp_enqueue_scripts', 'frontend_enqueued_scripts' );

/**
 * Localization object
 *
 * @since 1.0.0
 */
function frontend_enqueued_scripts() {

    wp_enqueue_script( 'script', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '', true );
    wp_localize_script( 'script', 'ajax_object', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
    ));
}

如果你有，在你的functions.php中你將前端腳本wp_enqueue_script wp_localize_script地方放置了wp_enqueue_script和wp_localize_script部分。 此外，如果您將ajax調用javascript放在一個名為custom.js的文件中， custom.js名稱更改為指向它。 我總是使用custom.js作為文件存儲我所有與主題相關的javascript。

上面的代碼將在您的前端創建一個ajax_object對象，該對象可用於custom.js的代碼，因為您已將其附加到該腳本。 排隊文件和本地化腳本（在我們的示例script ）中的句柄必須相同才能使其工作。

然后你可以在functions.php文件中創建，或者在你放置ajax函數的任何包含文件中創建一個回調函數

/**
 * Front and back end ajax hooks.
 */
add_action( 'wp_ajax_edit_committee', 'edit_committee' );
add_action( 'wp_ajax_nopriv_edit_committee', 'edit_committee' );

/**
 * Ajax callback function
 *
 * @since 1.0.0
 */
function edit_committee() {
    global $wpdb;

    if ( isset( $_POST['id'], $_POST['committee_nonce'] ) && wp_verify_nonce( sanitize_key( $_POST['committee_nonce'] ), 'committee_nonce_action' ) && '' !== $_POST['id'] ) { // Input var okay.
        $id          = ( isset( $_POST['id'] ) && '' !== $_POST['id'] ) ? sanitize_text_field( wp_unslash( $_POST['id'] ) ); : ''; // Input var okay.
        $name        = ( isset( $_POST['name'] ) && '' !== $_POST['name'] ) ? sanitize_text_field( wp_unslash( $_POST['name'] ) ); : ''; // Input var okay.
        $created     = ( isset( $_POST['create_date'] ) && '' !== $_POST['create_date'] ) ? sanitize_text_field( wp_unslash( $_POST['create_date'] ) ); : ''; // Input var okay.
        $stats       = ( isset( $_POST['stats'] ) && '' !== $_POST['stats'] ) ? sanitize_text_field( wp_unslash( $_POST['stats'] ) ); : ''; // Input var okay.
        $date_expire = ( isset( $_POST['date_expire'] ) && '' !== $_POST['date_expire'] ) ? sanitize_text_field( wp_unslash( $_POST['date_expire'] ) ); : ''; // Input var okay.

        $updated = $wpdb->update( 'itemsTable', array(  'name' => $name ), array( 'committee_id' => $id ), array( '%s' ) );
        if( false !== $updated ) {
            wp_die( 'success' );
        } else {
            wp_die( 'fail' );
        }

    }
}

我添加了消毒檢查。 在表單中包含一個用於提交數據的隨機數是至關重要的。

您可以通過放置添加它

wp_nonce_field( 'committee_nonce_action', 'committee_nonce' );

在前端的<form>元素內。 這將生成一個nonce ，這是一個很好的安全措施，尤其是在您寫入數據庫時​​。

回調函數將檢查nonce是否已設置，如果$_POST['id']變量設置為非空，並將首先驗證nonce。

然后你可以繼續執行該功能。

即使您沒有使用它們，我也會將所有$POST變量留在那里，但也許您以后會想要使用它們。 我也對它們進行了消毒並將它們刪除了。

// Input var okay. 評論是出於phpcs的目的，你可以忽略它。

然后，您預先形成更新。 如果數據庫中有itemsTable ，則應使用您提供的數據更新它。

最后但並非最不重要的是javascript代碼。 我假設您正在通過某種按鈕點擊執行ajax調用。 這需要改變它才能工作（我使用了#update_button ，你會放置你的按鈕的正確id或類）

jQuery(document).ready(function($) {
    'use strict';

    $('#update_button').on('click', function(e){
        e.preventDefault();

        var ID = $(this).attr('id'); // Button that is clicked is in $(this) object
        var name = $('#name_input_'+ID).val();
        var create_date = $('#created_input_'+ID).val();
        var stats = $('#status_input_'+ID).val();
        var date_expire = $('#disbanded_input_'+ID).val();

        // Can place loading image here
        if ( name.length > 0 || create_date.length > 0 || stats.length > 0 || date_expire.length > 0 ) {
            $.ajax({
                type: 'POST',
                url: ajax_object.ajaxurl,
                data: {
                    'action' : 'edit_committee',
                    'id' : ID,
                    'name' : name,
                    'create_date' : create_date,
                    'stats' : stats,
                    'date_expire' : date_expire,
                    'committee_nonce' : $( '#committee_nonce' ).val()
                },
                cache: false,
                error: function( jqXHR, textStatus, errorThrown ) {
                    console.log( jqXHR + ' :: ' + textStatus + ' :: ' + errorThrown );
                },
                success: function (html) {
                    if ( html == 'success' ) {
                        $('#name_'+ID).html(name);
                        $('#createDate_'+ID).html(create_date);
                        $('#stats_'+ID).html(stats);
                        $('#dateExpire_'+ID).html(date_expire);
                    }
                }
            });
        } else {
            alert('Enter text to make an edit.');
        }

    });

});

我還將變量名稱更改為short_name格式，而不是shortName 。 我覺得整潔。

請注意，對於url，我們使用了ajax_object.ajaxurl - 這是ajax_object開始的本地化ajax_object ，引用了admin-ajax.php文件的正確路徑。 數據只是您的字符串，但寫為對象。

因此，當您單擊該按鈕時，您的ajax調用會將所有數據放入全局$_POST變量中。

您可以通過運行檢查器並單擊網絡> XHR選項卡來檢查它

此外，如果你不確定你的$_POST變量是什么，請放

error_log(print_r($_POST, true));

在您的edit_committee()函數中，在驗證檢查之前（if條件）。 如果您在wp-config.php啟用了調試

define('WP_DEBUG', true);
ini_set('log_errors',TRUE);
ini_set('error_reporting', E_ALL);
ini_set('error_log', dirname(__FILE__) . '/error_log.txt');

你將在WordPress安裝的根目錄中有error_log.txt ，你可以檢查$_POST變量的內容是什么。

希望這可以幫助 ;）

Answer 3

我很確定你沒有將POST數據發送到PHP文件 - 檢查它。 在php中輸入var_dump($_POST) ，並在ajax的成功部分添加console.log(html) 。

嘗試將JS中的dataString變量更改為：

var dataString = {
 id:ID,
 name:name,
 createDate:createDate,
 stats:stats,
 dateExpire:dateExpire
};

Answer 4

$wpdb->update( 'table',
array( 'column' => $name),
array( 'ID' => 1 ),
array( '%s'), 
array( '%d' )
);