Q&A
ad_url
には何が入ってるんでしょう。
GETならブラウザから直アクセスでも実行はできるのでJavaScript通さなくても確認できます。
前提・実現したいこと
ワードプレスで絞り検索の機能を実装中です。
イメージとしては、カスタム投稿のタグとカテゴリを押すと、
それに紐づいた投稿が表示されるというものです。
しかし、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/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
ご質問いただきありがとうございます！
ad_urlには下記が入っています。
var ad_url = {"ajax_url":"https:\/\/サイトURL\/ワードプレスのインストールフォルダ\/wp-admin\/admin-ajax.php"};
上記は、ワードプレスでajaxを使う方法が紹介されているサイトのやり方を、そのまま使用しています。
回答1件
0
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
総合スコア114784
yambejp様
ご回答いただきありがとうございます！
記載いただいたコートで試してみましたが、
まだ400のエラーが返ってきているようです。
>getはajaxのdataに直接formdataを指定できません
上記のアドバイスをいただきましたので、
もう少し「formdataの渡し方」について試行錯誤してみます！
あなたの回答
tips
プレビュー
