如何将简单的表单提交转换为ajax提交而不加载页面，例如将产品添加到购物车功能

Answer 1

#在 jQuery 中# 监听表单提交并附上此代码。

记得添加

event.preventDefault()'

  $.post(
                    ajaxurl,
                    { action: 'action_registered_by_add_action', addift_add_wl_btn_popup: addift_add_wl_btn_popup, addify_wl_product_id:addify_wl_product_id  },
                    function( response ) {
                        //do something
                    }
                );

#在 PHP 中#

//register ajax
add_action( 'wp_ajax_ACTION_NAME', function(){
            //base stufs here
        } );
```--
###or### 

add_action( 'wp_ajax_ACTION_NAME', [$this, '方法'] );

##EDITED##


    
    //add this register to handle both logged in and not logged in users
    
    //add_action( 'wp_ajax_addify_get_sectiuon_btn',array( $this, 'addify_get_sectiuon_btn'));
    //add_action( 'wp_ajax_nopriv_addify_get_sectiuon_btn',array( $this, 'addify_get_sectiuon_btn'));

    

( function ( $ ) {
    $( function () {
        
        $( document ).ready( function ( $ ) {
            jQuery( '.addift_add_wl_btn_popup_class' ).click( function () {
                alert( "ok" );
            } );
            
            $( '.addift_add_wl_btn_popup_class' ).click( function ( event ) {
                
                event.preventDefault(); //prevent default behaviour - you have must add function param named `event`

                /*
                *   if its *.js file you must localize script to add variable see more https://wordpress.stackexchange.com/a/190299
                *   if its *.php file you can do this dirty inline php inside script
                */
                let ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ) ?>"; // wp ajax url obtain by wc helper {{ admin_url( 'admin-ajax.php' ) }}
                
                let addift_add_wl_btn_popup = $('#addift_add_wl_btn_popup').val(); // or anything else - value taken from form
                let addify_wl_product_id = $('#addify_wl_product_id').val();  // or anything else - value taken from form

                $.post( ajaxurl, {
                    action: 'addify_get_sectiuon_btn',
                    addift_add_wl_btn_popup: addift_add_wl_btn_popup,
                    addify_wl_product_id: addify_wl_product_id
                },
                function ( response ) {
                    //do something s
                } );
            } );
        } );
        
    } );
} )( jQuery );

Answer 2

我的jquery

挂钩

add_action( 'wp_ajax_addify_get_sectiuon_btn',array( $this, 'addify_get_sectiuon_btn'));

挂钩回调是

public function addify_get_sectiuon_btn() {
        $wl_p_id     = '';

            if ( isset( $_POST['addift_add_wl_btn_popup'] ) ) {

            if ( isset( $_POST['addify_wl_product_id'] ) ) {
                $addify_add_to_wl_pro = sanitize_text_field( wp_unslash( $_POST ['addify_wl_product_id'] ) );
            }
            $addify_wl_var1 = array();
         $addify_wl_var1 = WC()->session->get( 'addify_section_name' );
         if ( !empty( $addify_wl_var1) ) {
            $addify_wl_var2 =$addify_add_to_wl_pro;
            array_push( $addify_wl_var1 ,$addify_wl_var2);
            WC()->session->set( 'addify_section_name',  $addify_wl_var1 );
         } else {
            WC()->session->set( 'addify_section_name',  array($addify_add_to_wl_pro) );
         }
         // WC()->session->set( 'addify_section_name', null );
        }
    }