ajaxを使ってワードプレスの絞り込み検索をすると400エラーが返ってくる

前提・実現したいこと

ワードプレスで絞り検索の機能を実装中です。

イメージとしては、カスタム投稿のタグとカテゴリを押すと、
それに紐づいた投稿が表示されるというものです。

しかし、ajaxで部分的に検索結果を表示しようとすると、
400エラーが返ってきてしまい、
上手く表示がされません。

ここ3日ほど、
色々と調べて見ましたが、
原因は分からずじまいです。

ページャーを使っているので、
ajaxの指定は「get」を使っています。

流れとしては、
１、custom-search.phpで記事表示と検索
２、function.phpでajaxの読み込みとワードプレス用のショートコード[search]の作成
３、search.jsでajaxのプログラム
４、固定ページで全てを表示

このような流れです。

該当ソースコードも貼りますので、
有識者の方がいらっしゃれば何か助言をくださいませんか？

何卒よろしくお願いいたします。

参考ソースコードは下記です。
https://webfun-style.com/wordpress-custom-search/

発生している問題・エラーメッセージ

ajaxのエラーメッセージは下記となります。

XMLHttpRequest : 400
textStatus     : error
errorThrown    : undefined

該当のソースコード（custom-search.php）

<!-- 1. 検索条件の取得と変数の設定 -->
<?php
 // ページ番号を取得
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
'paged' => $paged, // ページ番号を設定
'post_type' => 'case',
'post_status' => 'publish',
'posts_per_page' => 12,
'orderby' => 'menu_order'
);

if(!empty($_POST['search_product'])) {
    foreach($_POST['search_product'] as $value) {
      $search_product[] = htmlspecialchars($value, ENT_QUOTES);
    }
    $tax_query_args[] = array(
                           'taxonomy' => 'product',
                           'terms' => $search_product,
                           'field' => 'slug',
                           'operator' => 'IN'
                        );
  }

  if(!empty($_GET['search_usesystem'])) {
    foreach($_GET['search_usesystem'] as $value) {
      $search_usesystem[] = htmlspecialchars($value, ENT_QUOTES);
    }

$tax_query_args[] = array(
                           'taxonomy' => 'usesystem',
                           'terms' => $search_usesystem,
                           'field' => 'slug',
                           'operator' => 'IN'
                        );
  }

  if(!empty($_GET['search_product']) || !empty($_GET['search_usesystem'])) {
    $args += array('tax_query' => array($tax_query_args));
  }
?>


<!-- 2. 検索フォームの表示 -->
<div id="search-result">
<div class="search">
<form method="get" action="<?php echo esc_url(get_the_permalink()); ?>">
<div class="checkbox">

<div class="condition-title">商材</div>
<div class="condition">
<?php
$products = get_terms('product', Array('hide_empty' => false));
foreach($products as $product):
      $checked = "";
if(in_array($product->slug, (array)$search_product)) $checked = " checked";
?>

  <label>
  <input type="checkbox" name="search_product[]" value="<?php echo esc_attr($product->slug); ?>"<?php echo $checked; ?>>
<?php echo esc_html($product->name); ?><span class="num"><?php echo "(" ?><?php echo esc_html($product->count); ?><?php echo ")" ?></span>
  </label>
  <?php endforeach; ?>
</div>

<div class="condition-title">使用システム</div>
<div class="condition">
<?php
$usesystemes = get_terms('usesystem', Array('hide_empty' => false));
foreach($usesystemes as $usesystem):
      $checked = "";
if(in_array($usesystem->slug, (array)$search_usesystem)) $checked = " checked";
?>
  <label>
  <input type="checkbox" name="search_usesystem[]" value="<?php echo esc_attr($usesystem->slug); ?>"<?php echo $checked; ?>>
  <?php echo esc_html($usesystem->name ); ?><span class="num"><?php echo "(" ?><?php echo esc_html($usesystem->count); ?><?php echo ")" ?></span>
  </label>
  <?php endforeach; ?>
</div>
		
	
	
</div>

<input type="submit" value="検索" class="submit-button">
<!-- （追記2）nonceのhiddenタグを生成 -->
<?php wp_nonce_field('my-ajax-nonce', 'nonce'); ?>
</form>
																														 
<!-- 3. 検索結果の取得と表示 -->
<?php
  $the_query = new WP_Query($args);
  if($the_query->have_posts()) :
?>	

<div class="result">
<?php
  while($the_query->have_posts()) :
    $the_query->the_post();
?>			
<div class="article">
  <a href="<?php the_permalink(); ?>">
  <?php the_post_thumbnail('medium'); ?>
<div class="art_cate">
<?php echo get_the_term_list($post->ID, 'product'); ?>
<?php echo '｜' ; ?>
<?php echo get_the_term_list($post->ID,'usesystem'); ?>
</div>
  <div class="art_title"><?php the_title(); ?></div>
  </a>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>

<?php
    // ページャーを設置
    echo paginate_links(array(
        'total' => $the_query->max_num_pages,
        'current' => $paged,
        'type' => 'list',
    )); 
?>
<?php else : ?>
<p>該当する事例はありませんでした。</p>
<?php endif; ?>
	  </div>
</div>

該当のソースコード（function.php）

// ショートコードで絞り込み検索を設置する関数
function shortcode_search() {
  ob_start();
  get_template_part('custom-search');
  return ob_get_clean();
}
add_shortcode('search', 'shortcode_search');

// ajax読み込み
function my_enqueue() {
  // 特定のページのみで読み込む
  if ( is_page( 'dounyuuzirei' ) ) {
    // Ajaxの処理を書いたjsの読み込み
    wp_enqueue_script( 'ajax-script', get_stylesheet_directory_uri().'/search.js', array('jquery'), null, true );
    // 「ad_url.ajax_url」のようにしてURLを指定できるようになる
    wp_localize_script( 'ajax-script', 'ad_url',array( 'ajax_url' => admin_url( 'admin-ajax.php') ) );
  }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

// Ajaxで検索結果を表示する関数
function custom_search() {
    $nonce = $_REQUEST['nonce'];
    if(wp_verify_nonce($nonce, 'my-ajax-nonce')) {
        get_template_part('custom-search');
    }
    die();
}


// ログインしているユーザー向け関数
add_action( 'wp_ajax_custom_search', 'custom_search' );
// 非ログインユーザー用関数
add_action( 'wp_ajax_nopriv_custom_search', 'custom_search' );

該当のソースコード（search.js）

jQuery(function($){
    function customSearch(){
        // 1. フォームのデータを生成
        var form = $('#search-result form').get()[0];
        var formData = new FormData(form);
        formData.append('action', 'custom_search');

        // 2. Ajaxを行う
        $.ajax({
          type: "GET",
          url: ad_url.ajax_url,
          data: formData,
          processData: false,
          contentType: false,
			error: function(XMLHttpRequest, textStatus, errorThrown) {
　　	  alert("ロード失敗");
　　	console.log("XMLHttpRequest : " + XMLHttpRequest.status);		//HTTPリクエストのステータス取得
　　	console.log("textStatus     : " + textStatus);					//タイムアウト、パースエラー等のエラー情報
　　	console.log("errorThrown    : " + errorThrown.message);			//例外情報の取得
        },
          success: function(data){
            $('#search-result').prop('outerHTML', data);
            $('.submit-button').attr('type', 'button');
          }
        });
        return false;
    };

    // 3. クリックイベントの設定
    $('.submit-button').attr('type', 'button');
    $(document).on('click', '.submit-button', function(){
        customSearch();
    });
});

試したこと

ajaxの書き方について検索
400エラーが起こる原因を調査し、
色々試したが、原因解決に至らず

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2021/11/09 21:20

ad_url には何が入ってるんでしょう。 GETならブラウザから直アクセスでも実行はできるのでJavaScript通さなくても確認できます。

mochitapi

2021/11/10 14:18

ご質問いただきありがとうございます！ ad_urlには下記が入っています。 var ad_url = {"ajax_url":"https:\/\/サイトURL\/ワードプレスのインストールフォルダ\/wp-admin\/admin-ajax.php"}; 上記は、ワードプレスでajaxを使う方法が紹介されているサイトのやり方を、そのまま使用しています。

行動規範の内容に同意します

回答1件

getはajaxのdataに直接formdataを指定できません
どうしてもformdataからデータを渡したいなら
こんな処理をしてください

javascript
1    data: Object.fromEntries([...formData]),
2//   processData: false,
3//   contentType: false,
4

※processData、contentTypeは不要なのでコメントアウト

投稿2021/11/10 00:21

yambejp

総合スコア116724

mochitapi

2021/11/10 14:28

yambejp様ご回答いただきありがとうございます！記載いただいたコートで試してみましたが、まだ400のエラーが返ってきているようです。 >getはajaxのdataに直接formdataを指定できません上記のアドバイスをいただきましたので、もう少し「formdataの渡し方」について試行錯誤してみます！

行動規範の内容に同意します