web-dev-qa-db-fra.com

Comment insérer un enregistrement en cliquant sur le lien en utilisant AJAX

Je développe un plugin pour WordPress.

À la recherche d'une solution

Je veux insérer un enregistrement (il peut s'agir de n'importe quelle opération CRUD) lorsque l'utilisateur clique sur le lien order-button

Je suis très nouveau sur Ajax, donc je ne sais pas comment le faire lorsque l'utilisateur clique sur le lien Commande dans la grille du produit, il doit être ajouté à la table personnalisée.

J'ai mis en place tous les bogues ne pouvant pas obtenir l'attribut de données du lien dans la fonction de rappel Ajax pour le transmettre à la méthode jQuery ajax.

Scripts de file d'attente

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

Actions Ajax et fonction de rappel

J'ai essayé de transmettre des données statiques et d'accéder à la sortie de la console. Sinon, il donne null car il n'envisage pas de définir les données directement dans le paramètre de données AJAX.
Comment puis-je obtenir des données dynamiquement dans la fonction de rappel à partir de la balise d'ancrage cliquée?

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 - Élément de grille de produit

<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

le paramètre de données renvoie une valeur de 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

Sortie console

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


null
ajaxcallbacks
1
pixelngrain

S'il s'agit de vos données de demande pour un AJAX POST:

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

Ensuite, vous accédez à product_groups Et products comme ceci:

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

Assurez-vous simplement de désinfecter et d'échapper les données comme requis. S'ils doivent être des identifiants, vous pouvez simplement utiliser absint():

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

Et pour vérifier le nonce, utilisez:

check_ajax_referer( 'gs_nonce', 'nonce_data' );

Alors tous ensemble:

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: Je n'ai aucune idée de ce que Group_Shop_Order Est, ni comment cela fonctionne, donc je ne peux pas dire si l'utilisation de $order->create_order() est correcte. Je vais juste de votre code pour ça.

1
Jacob Peattie