Javascript PHP中的vanilla JS AJAX调用函数？WP_查询

在my function.php中调用我的函数时遇到问题。这就是函数

排队脚本&本地化

Function.php中的函数，我试图调用该过滤器产品

---

我不断收到400个错误的请求，有人能帮我一下，告诉我这个有什么问题吗？

正如我在评论中所说的，后端要求您以正常的POST方式发送请求，而不是JSON

因此，使用

application/x-www-form-urlencoded

作为标题，并在正文中发送查询字符串，而不是JSON

let _data = { action : 'a_product_filter', product_something: 'value that i want to send to the server'};
fetch(a_product_filter.ajax_url, {
    method: 'POST',
    body: (new URLSearchParams(_data)).toString(),
    headers: { 'Content-type': 'application/x-www-form-urlencoded' }
})
.then(response => response.text())
.then(product_html => document.getElementById('container').insertAdjacentHTML(product_html));
// put the markup created by server and put it inside somewhere in the frontend

然后在后端，准备该请求。这是一个未经测试的代码，您可以在服务器中使用。因此，当前端请求时，服务器（处理请求的PHP代码将给出您想要响应的产品的标记）

只要遵循这个想法。创建标记并响应（

echo

和

exit

）

add_action（'wp_-ajax_-a_-product_-filter'，'a_-product_-filter'）；
添加动作（“wp\u ajax\u nopriv\u产品过滤器”、“产品过滤器”）；
函数a_产品_过滤器（）{
//$variable=$\u POST['product\u something']；
$html_markup=_e（'没有符合您标准的产品'）；
$args=数组（
“post_类型”=>“产品”，
“每页帖子数”=>5，
'product_tag'=>'FEMALE'//仅用于测试，无需传递变量
);
$loop=新的WP_查询（$args）；
如果（$loop->found\u posts>0）{
//获取字符串中的模板
ob_start（）；
wc_获取_模板_部分（“内容”、“产品”）；
$template=ob_get_contents（）；
ob_end_clean（）；
$html_markup='
'；
foreach（$loop->get_posts（）作为$post）{
$html_标记。='
'；//初始化列表项
$html\u markup.=$template；//添加模板
$html\u标记。=''；//链接和标题
$html\u markup.=具有\u post\u缩略图（$loop->post->ID）？获取\u post\u缩略图（$post->ID，'shop\u catalog'）；：“”；//产品图像
$html_markup.='
'；//结束列表项
}
$html_标记。='
'；
}
echo$html_标记；
出口
}

首先，您的php正在返回HTML，因此您需要

response.text（）

而不是

response.json（）

。检查您的php调用是否返回您所期望的内容，方法是通过浏览器进行调用，或者使用Postman之类的工具进行POST。我不确定您为什么要将json头发送到后端，这不应该只是一个普通的post表单urlencoded吗？旁注：使用ajax nonce作为附加检查。我通过将正文包装在

new URLSearchParams（）

中，并将标题包装到

headers:{“Content type”：“application/x-www-form-urlencoded；charset=UTF-8”}

正如您在回答中提到并解决的，最初我的Jquery ajax调用是有效的，并且我认为请求中的主体不同，只是不知道如何将Fetchs主体更改为一个对象，这会让您满意，但我无法创建新的帐户restriction@Ojisan当然没问题，很高兴这有帮助

add_action('wp_ajax_a_product_filter', 'a_product_filter');

add_action('wp_ajax_nopriv_a_product_filter', 'a_product_filter');
function a_product_filter() {
  echo "called";
  $args = array( 
              'post_type'    => 'product', 
              'posts_per_page' => 5, 
              'product_tag'    => 'FEMALE' //just for testing without passing a variable
              );
        
        // Create the new query
        $loop = new WP_Query( $args );
        
        // Get products number
        $product_count = $loop->post_count;
        
        // If results
        if( $product_count > 0 ) :
        
          echo '<ul class="products">';
          
            // Start the loop
            while ( $loop->have_posts() ) : $loop->the_post(); //global $product;
            
              //global $post;
              wc_get_template_part( 'content', 'product' );

              echo '<a href="'.get_permalink($product_id).'">'.get_the_title($product_id).'</a>';
              
              if (has_post_thumbnail( $loop->post->ID )) 
                echo  get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); 
              else 
                echo '<img src="'.$woocommerce .'/assets/images/placeholder.png" alt="" width="'.$woocommerce->get_image_size('shop_catalog_image_width').'px" height="'.$woocommerce->get_image_size('shop_catalog_image_height').'px" />';
          
            endwhile;
          
          echo '</ul><!--/.products-->';
        
        else :
        
          _e('No product matching your criteria.');
        
        endif; // endif $product_count > 0
}

function ajax_call_test(){
  // data to be sent to the POST request
  let _data = {
    action : 'a_product_filter',
    
  }

  fetch(a_product_filter.ajax_url , {
    method: "POST",
    body: JSON.stringify(_data),
    headers: {"Content-type": "application/json; charset=UTF-8"}
  })
  .then(response => response.json()) 
  .then(json => console.log(json));
  
}

let _data = { action : 'a_product_filter', product_something: 'value that i want to send to the server'};
fetch(a_product_filter.ajax_url, {
    method: 'POST',
    body: (new URLSearchParams(_data)).toString(),
    headers: { 'Content-type': 'application/x-www-form-urlencoded' }
})
.then(response => response.text())
.then(product_html => document.getElementById('container').insertAdjacentHTML(product_html));
// put the markup created by server and put it inside somewhere in the frontend

add_action('wp_ajax_a_product_filter', 'a_product_filter');
add_action('wp_ajax_nopriv_a_product_filter', 'a_product_filter');
function a_product_filter() {
    // $variable = $_POST['product_something'];
    $html_markup = _e('No product matching your criteria.');
    $args = array( 
        'post_type' => 'product', 
        'posts_per_page' => 5, 
        'product_tag' => 'FEMALE' //just for testing without passing a variable
    );
    $loop = new WP_Query($args);
    if ($loop->found_posts > 0) {
        // get template in string
        ob_start();
        wc_get_template_part('content', 'product');
        $template = ob_get_contents();
        ob_end_clean();
        $html_markup = '<ul class="products">';
        foreach ($loop->get_posts() as $post) {
            $html_markup .= '<li>'; // initialize list item    
            $html_markup .= $template; // add the template
            $html_markup .= '<a href="' . get_permalink($post->ID) . '">' . get_title($post->ID). '</a>'; // link and title
            $html_markup .= has_post_thumbnail( $loop->post->ID) ? get_the_post_thumbnail($post->ID, 'shop_catalog'); : '<img src="placeholder.jpg" />' ; // image of product
            $html_markup .= '</li>'; // end list item
        }
        $html_markup .= '</ul>';
    }

    echo $html_markup;
    exit;
}