wordpress 使用 AJAX 和PHP函数更新图像源代码

ih99xse1 于 2022-11-22 发布在 WordPress

关注(0)|答案(2)|浏览(102)

我想在WordPress中使用 AJAX 更改单击时的图像功能。下面是我的代码：
JS：

jQuery(".swatchinput label").click(function(){
     var mycolor = jQuery(this).attr("data-option");
     var postid = jQuery(".single-product .product.type-product").attr("data-id");

        jQuery.ajax({
            cache: false,
            timeout: 8000,
            url: php_array.admin_ajax,
            type: "POST",
            data: ({ action:'theme_post_vimage', colorimg: mycolor, postvalue: postid}),

                  beforeSend: function() {                    
            },

            success: function(response){

                var myimageresponse = jQuery( response );
                jQuery( '.product-image a img' ).attr('src', myimageresponse);                                                      

            },

            error: function( jqXHR, textStatus, errorThrown ){
                console.log( 'The following error occured: ' + textStatus, errorThrown );   
            },

            complete: function( jqXHR, textStatus ){
            }

            });
    });

这是我的PHP/WordPress中的函数：

add_action('wp_ajax_theme_post_vimage','theme_post_vimage_init');
add_action( 'wp_ajax_nopriv_theme_post_vimage', 'theme_post_vimage_init' );
function theme_post_vimage_init() { ?>
<?php
global $post, $product, $woocommerce;    

 $postiID = $_POST['postvalue'];
 $colorname = $_POST['colorimg'];

$product = new WC_Product_Variable( $postiID );
$variations = $product->get_available_variations();
foreach ( $variations as $variation ) {
    if($variation['attributes']['attribute_pa_color'] == $colorname) :
    $myimageurl = $variation['image']['url'];
    echo $myimageurl;
    endif;
}
?>

<?php }

当我单击我的颜色时，浏览器控制台中显示此错误：

Uncaught Error: Syntax error, unrecognized expression: http://samsonite.stuntmen.ae/wp-content/uploads/2017/05/PROD_COL_73353_1726_WHEEL-HANDLE-FULL.jpg

wordpress

来源：https://stackoverflow.com/questions/44153705/update-image-src-using-ajax-and-php-function

2条答案

按热度按时间

uemypmqf1#

jQuery( response );是错误的...为什么不直接使用response？

success: function(response){

            jQuery( '.product-image a img' ).attr('src', response);                                                      

        },

此外，我建议您将您实现更改为如下所示的内容。

PHP语言

function theme_post_vimage_init() { 

    $postiID = $_POST['postvalue'];
    $colorname = $_POST['colorimg'];

    $product = wc_get_product( $postiID );
    $variations = $product->get_available_variations();
    $return = array(
        'status' => 'failed',
    );
    foreach ( $variations as $variation ) {
        if($variation['attributes']['attribute_pa_color'] == $colorname) :
            $return = array(
                'status' => 'success',
                'url' => $variation['image']['url'],
            );
        endif;
    }
    wp_send_json($return);
}

jQuery查询器

jQuery(".swatchinput label").click(function(){
     var mycolor = jQuery(this).attr("data-option");
     var postid = jQuery(".single-product .product.type-product").attr("data-id");

    jQuery.ajax({
        cache: false,
        timeout: 8000,
        url: php_array.admin_ajax,
        type: "POST",
        data: ({ action:'theme_post_vimage', colorimg: mycolor, postvalue: postid}),

              beforeSend: function() {                    
        },

        success: function(response){
            if ( response.status === 'success' ) {
               jQuery( '.product-image a img' ).attr('src', response.url);   
            }
            // you can also do something for response.status === 'failed'                    

        },

        error: function( jqXHR, textStatus, errorThrown ){
            console.log( 'The following error occured: ' + textStatus, errorThrown );   
        },

        complete: function( jqXHR, textStatus ){
        }

        });
});

查找success我做了更改。

赞(0）回复(0）举报 2022-11-22

w1e3prcc2#

将第data: ({ action:'theme_post_vimage', colorimg: mycolor, postvalue: postid}),行替换为

data: { action:'theme_post_vimage', colorimg: mycolor, postvalue: postid},

在你的 AJAX 输出中，你使用'？〉来放置不必要白色
更重要的是，jQuery( response )在您的成功函数中是什么？仅使用response。

赞(0）回复(0）举报 2022-11-22

我来回答

wordpress 使用 AJAX 和PHP函数更新图像源代码

2条答案

相关问题

热门标签

最新问答