2

我一直在钻研 Javascript 和 AJAX 的世界。我非常接近，但出于某种原因，我认为我没有正确连接到 wordpress ajax 功能。我已经翻阅了文档和这个，并认为它是 99%。

这个应用程序的作用是有一个项目列表。每个都有一个 + 按钮。单击按钮会弹出一个确认框，如果确认则抓取所需的数据以传递给 php.ini。php 使用 wpdb->insert 将该项目添加到 mysql 中。如果您购买，它也会进行一些更改。

js 一直工作到调用，获取正确的值等。如果我对应该从 POST 获取的值进行硬编码，单独测试 php 也可以。所以我知道这两个部分都在运行，我只是无法让 js 正确调用 ajax api。有人可以看看这个，让我知道如何将它们连接在一起，以便 ajax 调用实际运行 php？

这是代码。

<?php 
add_action( 'admin_footer', 'addItemAJAX_javascript' );

function addItemAJAX_javascript() {
    $adminAJAX =  admin_url('admin-ajax.php'); 
?>
<script type="text/javascript" language="JavaScript">

  $(function() {
    $( "input[name=btnAddItem]" )  
      .button()
      .click(function( event ) {
        event.preventDefault();
        var confirmAction = confirm('Are you sure you want to add this item to your character?');
        if (confirmAction==true) {
    // build data for AJAX call
            var cID = $('#hdnCharID').val();
            cID = cID*1;
            var charMoney = $('#hdnCharMoney').val();
            var thisValue = $(this).val();
            var iID = $(this).prev('input[id="hdnItemID"]').val()
            iID = iID*1;
    //Add or Buy Item
            if (thisValue != "+") {
                var buy = 1;
            }
            else {
                var buy = 0;
                }
            var ajaxurl = <?php echo json_encode($adminAJAX); ?>;
            console.log('cID = ' + cID);
            console.log('charMoney = ' + charMoney);
            console.log('thisValue = ' + thisValue);
            console.log('iID = ' + iID);        
            console.log('buy = ' + buy);        
            console.log('ajaxurl = ' + ajaxurl);                
            var data = {
                        action: 'addItemAJAX',
                        charID: cID,
                        itemID: iID,
                        buyItem: buy
            };
            console.log('data = ' + data);
            console.log(data);

    //WP ajax call
            $.post(ajaxurl, data, function(response) {
            alert('Got this from the server: ' + response);
            });
        }
        else {
            console.log('add item aborted');
        }
      });
  });
</script>
<?php 

}; 

addItemAJAX_javascript();

// PHP SIDE OF AJAX - Handeling Request  //// AJAX PROCESSING /////////////////////////////////
add_action('wp_ajax_addItemAJAX', 'addItemAJAX_callback');

function addItemAJAX_callback() {
    global $wpdb;
    $charID = intval($_POST['charID']);
    $itemID = intval($_POST['itemID']);
    $buyItem = intval($_POST['buyItem']);

//  //get item details
    $getItemDetailsSQL = "
    Select
      fyxt_wp_db_fatcow.fyxt_items.idfyxt_items,
      fyxt_wp_db_fatcow.fyxt_items.fyxt_item_name,
      fyxt_wp_db_fatcow.fyxt_items.fyxt_item_description,
      fyxt_wp_db_fatcow.fyxt_items.fyxt_item_cost,
      fyxt_wp_db_fatcow.fyxt_items.fyxt_item_weight
    From
      fyxt_wp_db_fatcow.fyxt_items
    Where
      fyxt_wp_db_fatcow.fyxt_items.idfyxt_items = $itemID";
    $getItemDetailsResults = $wpdb->get_row($getItemDetailsSQL);

    $iID = $getItemDetailsResults->idfyxt_items;
    $iName = $getItemDetailsResults->fyxt_item_name;
    $iDesc = $getItemDetailsResults->fyxt_item_description;
    $iCost = $getItemDetailsResults->fyxt_item_cost;
    $iWeight = $getItemDetailsResults->fyxt_item_weight; 

    $charItemTable = fyxt_char_items;
    $wpdb->insert(
                  $charItemTable,
                  array (
                          idfyxt_item => $iID,
                          idfyxt_character => $charID,
                          item_name => $iName,
                          item_desc => $iDesc,
                          item_cost => $iCost,
                          item_weight => $iWeight,
                          item_quant => 1,
                          equip => 0,
                          carried => 1
                        )
                  );
    $wpdb->print_error();                                               
    $newItemAdded = $wpdb->insert_id;

    //remove cash if item is bought
    if ($buyItem == 1 ) {
        $curCharMoneySQL = 
        "Select
          fyxt_wp_db_fatcow.fyxt_characters.char_money
        From
          fyxt_wp_db_fatcow.fyxt_characters
        Where
          fyxt_wp_db_fatcow.fyxt_characters.idfyxt_character = $charID";
        $curCharCash = $wpdb->get_var($curCharMoneySQL);
        $wpdb->print_error(); 

        $newCash = $curCharCash - $iCost;

        $changeCashSQL = "
        UPDATE fyxt_characters
        SET 
            char_money = $newCash
        WHERE
            idfyxt_character = $charID";
        $changeCash = $wpdb->query($changeCashSQL);
        $wpdb->print_error(); 
    }

    $debugArray = Array();
    array_push($debugArray,$charID, $itemID, $buyItem, $getItemDetailsSQL, $getItemDetailsResults,$newItemAdded, $newCash);
    echo $debugArray ;  

    die();
}

?>

我很确定这是两件事中的一件（或两件）。我不确定我是否将这些功能与 wordpress 挂钩。或者我对 jQuery 按钮的嵌套函数可能存在问题。我怀疑它是 2 号，因为它似乎可以工作......我只是从服务器返回 0，没有任何数据库活动。这是日志所说的。

cID = 112 ?charID=112:538
charMoney = 9990 ?charID=112:539
thisValue = + ?charID=112:540
iID = 664 ?charID=112:541
buy = 0 ?charID=112:542
ajaxurl = http://localhost/nnnnnnnn.com/wp-admin/admin-ajax.php ?charID=112:543
data = [object Object] ?charID=112:550
Object {action: "addItemAJAX", charID: 112, itemID: 664, buyItem: 0} ?charID=112:551
XHR finished loading: "http://localhost/nnnnnnnn.com/wp-admin/admin-ajax.php". jquery-1.9.1.js:8526
send jquery-1.9.1.js:8526
jQuery.extend.ajax jquery-1.9.1.js:7978
jQuery.(anonymous function) jquery-1.9.1.js:7614
(anonymous function) ?charID=112:554
jQuery.event.dispatch jquery-1.9.1.js:3074
elemData.handle

非常感谢大家的帮助和建议！

4

2 回答 2

5

首先你需要以正确的方式添加钩子

// For the users that are not logged in
add_action( 'wp_ajax_nopriv_addItemAJAX', 'addItemAJAX_callback' );  

// For the users that are  logged in:  
add_action( 'wp_ajax_addItemAJAX', 'addItemAJAX_callback' );

// ajax handler
function addItemAJAX_callback()
{
    // code goes here
    // since $debugArray is an array, so 
    die(json_encode($debugArray)); // last line
}

一个钩子在用户登录时工作，另一个钩子在用户未登录时工作（对于任何用户）。如果您正在为已登录的用户发出 ajax 请求，那么wp_ajax_nopriv_钩子是必需的。

将您的js/ajax代码保存在一个单独的文件中yourthemefolder/js/myAjaxScript.js，并将以下代码保存在您的functions.php文件中

add_action('wp_enqueue_scripts', 'my_load_scripts');
function my_load_scripts()
{
    // for pluggin, you may use "plugin_dir_url( __FILE__ )"
    wp_enqueue_script( 'my_ajax-script', get_stylesheet_directory_uri() . '/js/myAjaxScript.js', array('jquery') );

    // Following code will let you use "ajaxObj.ajax_url" to get the
    //  ajax url (admin-ajax.php) in your my_ajax_scriptjs file
    wp_localize_script(
        'my_ajax-script', 'ajaxObj', array( 'ajax_url' => admin_url( 'admin-ajax.php' )                
    ));
}

在您的my_ajax_script.js文件中，您可以像这样编写代码

var data = {
     action: 'addItemAJAX_callback',
     // ...
};
$.getJson(ajaxObj.ajax_url, data, function(response) {
     // response is an object
     // ...
});

还记得，当从管理面板使用 ajax 时，您不需要使用wp_localize_script，因为 2.8 ajaxurl 总是在管理标题中定义并指向admin-ajax.php.

于 2013-11-01T07:20:15.637 回答
1

我不会仔细阅读您的代码，因为它似乎有点难以复制（有关此问题，请参阅SSCCE）。但我将概述如何使用 Ajax 和 WordPress（来自如何在 WordPress 简码中使用 AJAX？）：

1) 对 JavaScript 文件进行排队和本地化。

我们可以直接在页眉或页脚中打印，而不是排队，但这不是一个好习惯。并且本地化将以干净的方式将 PHP 值传递给 JS。
我假设您正在使用主题，否则更改get_stylesheet_directory_uri()为plugins_url().

add_action( 'wp_enqueue_scripts', 'enqueue_so_19721859' );

function enqueue_so_19721859() 
{
    # jQuery will be loaded as a dependency
    ## DO NOT use other version than the one bundled with WP
    ### Things will BREAK if you do so
    wp_enqueue_script( 
        'my-handler',
        get_stylesheet_directory_uri() . '/js/ajax.js',
        array( 'jquery' )
    );
    # Here we send PHP values to JS
    wp_localize_script( 
        'my-handler', 
        'my_handler',
        array( 
            'ajaxurl'      => admin_url( 'admin-ajax.php' ),
            'ajaxnonce'   => wp_create_nonce( 'my_ajax_validation' ) // <--- Security!
        ) 
    );
}

2) 登录和未登录用户的 Ajax

您还必须添加一个公共 Ajax 回调no_priv_：

add_action('wp_ajax_addItemAJAX', 'addItemAJAX_callback');
add_action('wp_ajax_no_priv_addItemAJAX', 'addItemAJAX_callback');

3) Ajax 回调和响应

Ajax 回调具有安全检查并用于wp_send_json_*处理响应：

function addItemAJAX_callback()
{
    check_ajax_referer( 'my_ajax_validation', 'security' );
    $my_thing = something();
    if( !$my_thing )
        wp_send_json_error( array( 'error' => __( 'Could not retrieve a post.' ) ) );
    else
        wp_send_json_success( $my_thing );
}

4）最后，脚本

用mode包装所有 jQuery是很重要的。 您可以通过本地化对象传递您需要的任何信息。我们从响应中检查 3 件事：noConflict
my_handler

  • 完全失败：无法到达回调或未通过安全性
  • 部分失败：回调已到达但返回json_error
  • 成功：继续你的事情
jQuery( document ).ready( function( $ ) { 
     var data = {
         action: 'addItemAJAX_callback',
         security: my_handler.ajaxnonce
     };

    $( '#my-submit' ).click( function(e) {
        e.preventDefault();
        $.post( 
            my_handler.ajaxurl, 
            data,                   
            function( response ) {
                // ERROR HANDLING
                if( !response.success ) {
                    // No data came back, maybe a security error
                    if( !response.data )
                        $( '#my-answer' ).html( 'AJAX ERROR: no response' );
                    else
                        $( '#my-answer' ).html( response.data.error );
                }
                else
                    $( '#my-answer' ).html( response.data );
            }
        ); 
    });
});
于 2013-11-01T07:19:03.770 回答