web-dev-qa-db-ja.com

AJAXを使用してリンクをクリックしてレコードを挿入する方法

WordPress用のプラグインを開発しています。

解決策を探しています

ユーザーがリンクをクリックしたときにレコード（CRUD操作の可能性があります）を挿入したいorder-button

私はAjaxを初めて使用するので、ユーザーが製品グリッドの[注文]リンクをクリックしたときに、カスタムテーブルに追加する必要がある場合に、どのように達成するか混乱します。

Ajaxコールバック関数でリンクのデータ属性を取得できないすべてのバグをjQuery ajaxメソッドに渡すように設定しました。

エンキュースクリプト

function gs_enqueue_ajax_scripts()
{
    wp_register_script('gs_ajax', GROUP_SHOP_ROOT . 'public/js/orders-ajax.js', ['jquery'], 1.0, true);
    wp_localize_script('gs_ajax', 'ajax_vars', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('gs_nonce')
    ]);
    wp_enqueue_script('gs_ajax');
}

add_action('wp_enqueue_scripts', 'gs_enqueue_ajax_scripts');

Ajaxアクションとコールバック関数

静的データを渡してコンソール出力を取得してみました。それ以外の場合は、AJAX dataパラメータにデータを直接設定することを考慮していないため、nullを指定しています。
クリックしたアンカータグからコールバック関数で動的にデータを取得するにはどうすればよいですか？

add_action('wp_ajax_gs_order', 'gs_ajax_callback');
add_action('wp_ajax_nopriv_gs_order', 'gs_ajax_callback');

function gs_ajax_callback()
{
    /**
     * I have set statically to check if it works
     * Of course, this is working since it is static
     * BUT I WANT DATA HERE DYNAMICALLY TO PASS IN AJAX
     */
    /*$data = [
        'product_groups' => 1,
        'products' => 5
    ];*/

    /*echo json_encode($data);*/

    // run the query to add entry
    /*$order = new Group_Shop_Order();
    $order->create_order(194, $products_ids, $product_groups_ids);*/

    wp_die();
}

HTML-製品グリッドアイテム

<li class="gs-p-item">
    <div class="gs-p-item-container">
        <p class="gs-p-name">
            <a href="http://to-product-page" title="Id adipisci dolores dicta">Id adipisci dolores dicta</a>
        </p>
        <p class="gs-p-price">38.90</p>
        <a class="gs-button order-button et_pb_button" data-pid="168" href="javascript:void(0)" id="gs-p-168">Order</a>
    </div>
</li>

Javascript

データパラメータはnull値を返します

var $button = $('.order-button');
console.log(ajax_vars);
$button.attr('href', 'javascript:void(0)');

$button.on('click', function () {

    $.ajax({
        type: "POST",
        url: ajax_vars.ajax_url,
        data: {
            action: 'gs_order',
            nonce_data: ajax_vars.nonce,
            product_groups: $(this).data("pgid"),
            products: $(this).data("pid")
        },
        dataType: 'JSON',
        success: function (data) {
            $('#response').html(data);
            console.log(data);
        },
        error: function (data) {
            $('#response').html(data);
            console.log("Error is there"); //error
        }
    }); // ajax end

}); // on button click

コンソール出力

Object
    ajax_url: "http://wpdev.org/wp-admin/admin-ajax.php"
    nonce: "34cb70d514"
    __proto__: Object


null
ajaxcallbacks
1
pixelngrain

これがAJAX POSTの要求データである場合：

_data: {
    action: 'gs_order',
    nonce_data: ajax_vars.nonce,
    product_groups: $(this).data("pgid"),
    products: $(this).data("pid")
},
_

次に、次のように_product_groups_およびproductsにアクセスします。

_$data = [
    'product_groups' => $_POST['product_groups'],
    'products'       => $_POST['products'],
];
_

必要に応じて、データをサニタイズしてエスケープしてください。それらがIDになる場合は、absint()を使用できます。

_$data = [
    'product_groups' => absint( $_POST['product_groups'] ),
    'products'       => absint( $_POST['products'] ),
];
_

ナンスを確認するには、次のコマンドを使用します。

_check_ajax_referer( 'gs_nonce', 'nonce_data' );
_

まとめると：

_function gs_ajax_callback()
{
    check_ajax_referer( 'gs_nonce', 'nonce_data' );

    $data = [
        'product_groups' => absint( $_POST['product_groups'] ),
        'products'       => absint( $_POST['products'] ),
    ];

    $order = new Group_Shop_Order();
    $order->create_order( 194, $data['products'], $data['product_groups'] );

    wp_die();
}
_

PS：_Group_Shop_Order_が何であるか、またはどのように機能するかはわかりません。そのため、$order->create_order()の使用が正しいかどうかはわかりません。そのためのコードを作成します。

1
Jacob Peattie