使用ajax从wordpress数据库获取产品

Question

我使用WordPress构建自定义产品页面（page1.php）。

我在自定义产品页面（page1.php）上使用Ajax来调用其他页面，其中包含下面的代码（page2.php），使用下面的代码从wordpress数据库获取产品。

<?php 
    $args = array(
     'post_type'  => 'product', 
     'posts_per_page' => 10, 
     'product_cat' => 'hoodies' 
    ); 

    $loop = new WP_Query($args); 

    while ($loop->have_posts()) : $loop->the_post(); 
     global $product; 
     echo '<br /><a>' . woocommerce_get_product_thumbnail().' '.get_the_title().'</a>'; 
    endwhile; 

    wp_reset_query(); 
?> 

上述实际代码工作正常，当我不把它通过AJAX（即直接从www.localhost/WordPress的/使page2.php加载它），但是当我把它通过Ajax的page1.php中，我得到以下错误;

致命错误：未捕获的错误：\ XAMPP \ htdocs中\ WordPress的，完全定制\可湿性粉剂内容\主题\店面\使page2.php：9堆栈跟踪：＃0类 'WP_Query' 没有发现在C {main}抛出第9行C：\ xampp \ htdocs \ wordpress-fully-custom \ wp-content \ themes \ storefront \ test-page2.php

请问我该如何解决这个问题？

感谢

Answer 1

当你直接查看该页面时，WP_Query类多地得到某种方式进口。由于这不是通过AJAX发生的，您可能希望将其明确包含在该页面中。可以这样做：

include_once "path/to/wp-includes/class-wp-query.php"; 

Answer 2

在这里，我已经尝试过我的主题，它的工作很好！

希望这会为你工作。

的AJAX调用代码素文字：

jQuery('#productDataSubmit').click(wc_load_all_products); 
    function wc_load_all_orders() { 
     jQuery("#wc-products").html(""); 

     jQuery.ajax({ 
      type: "POST", 
      url: ajax_details.ajax_url, 
      data: {action: 'get_wc_products'}, 
      success: function (data) { 
       var products = jQuery.parseJSON(data); 
       jQuery('#wc-products').html(products.product_html); 
      } 
     }); 
     return false; 
    } 

行动AJAX调用函数返回的产品（添加到functions.php的这个）

add_action('wp_ajax_get_refund_data', 'get_wc_products'); 
    add_action('wp_ajax_nopriv_get_refund_data','get_wc_products'); 

功能让产品（添加到功能这一点。 php）

 /** 
    * AJAX function for products. 
    */ 
    function get_wc_products() { 
    $html=""; 
    $varition_args = array(
      'post_type' => 'product', 
      'posts_per_page' => 10, 
      'product_cat' => 'bags' 
     ); 
     $variation_query = new WP_Query($varition_args); 
    } 


    if ($variation_query->have_posts()) { 
      while ($variation_query->have_posts()) { 
       $variation_query->the_post(); 
       global $product; 
       $html.= '<tr>'; 
       $html.= '<td>'.get_the_ID().'</td>'; 
       $html.= '<td>'.get_the_title().'</td>'; 
       $html.= '<td>'.$product->get_price_html().'</td>'; 
       $html.= '</tr>'; 
      } 
    } 

    //Returns records 
    $data = []; 
    $data['product_html'] = $html; 
    } 

Answer 3

这里有大量的关于wordpress ajax的教程。这些TUTS你更好看....

Wordpress Official Ajax Tutorial

Sitepoint Ajax Tutorial With Some Good Examples

Code Tuts Tutorial For Frontend Ajax

Smashing Magazine Ajax Tutorial

而现在，让我们给你在这里快速AJAX例如：

jQuery(document).ready(function(){ 
    jQuery(".ajax_button_to_click").click(function(event){ 
    // event.preventDefault(); enable this if you want to stop click 
    behavior 
    var ajax_form_input_value = jQuery('#ajax_input_value').val(); 
    var ajax_text = jQuery('#ajax_text_value').text(); 
    jQuery.ajax({ 
     method: "POST", // http request method 
     url: ajaxurl, // indicates wp-ajax.php file which will handle the request 
     data: {'action':'ajax_function_name', //function name which will handle the ajax request inside your plugin or theme's functions.php file 
       'ajax_text_data':ajax_text, //text data to send with the ajax request 
       'ajax_form_value: ajax_form_input_value ' }, //form input data to send with the ajax request 
     success:function(data) { //on ajax request success run all inside this method 
     alert(data); 
    }, 
    error: function(errorThrown){ //if ajax fails then run this method 
     console.log(errorThrown); 
     } 
    }); 
    }); 
}); 

现在，在后端的ajax请求处理部分。

首先添加的js ajaxurl VAR：

add_action('wp_head', 'prefix_ajaxurl'); 

function prefix_ajaxurl() { 
    echo '<script type="text/javascript"> 
     var ajaxurl = "' . admin_url('admin-ajax.php') . '"; 
    </script>'; 
} 

其次加入阿贾克斯行动功能

function ajax_function_name(){ // function name should be same defined in ajax request action var. 
    $text = $_POST['ajax_text_data']; 
    $input_data = $_POST['ajax_form_value']; 
    echo $text; 
    echo $input_data; 
    die(); //you must write die(); to avoid echoing extra 0; 
} 
add_action('wp_ajax_ajax_function_name', 'ajax_function_name'); ?>