前提・実現したいこと
wordpressでajaxを使いたいのですが、タイトルのエラーが解消されません。
ajax参考サイトを丸コピーしています。
https://agohack.com/ajax-on-wordpress/#
【2. wp_localize_script() を使う方法】
その他、複数サイトで調べてみましたが、単に記述ミスなどばかりで、私のソース上では問題なかったと思いますが見落としがあるかもしれません。
発生している問題・エラーメッセージ
初期表示でjsが実行されます。
POST http://terad2.local/wp-admin/admin-ajax.php 400 (Bad Request)
【リクエスト情報】 リクエスト URL: http://terad2.local/wp-admin/admin-ajax.php リクエスト メソッド: POST ステータス コード: 400 Bad Request リモート アドレス: [::1]:80 参照ポリシー: strict-origin-when-cross-origin Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: http://terad2.local Cache-Control: no-cache, must-revalidate, max-age=0 Connection: keep-alive Content-Type: text/html; charset=UTF-8 Date: Sat, 23 Oct 2021 14:22:40 GMT Expires: Wed, 11 Jan 1984 05:00:00 GMT Referrer-Policy: strict-origin-when-cross-origin Server: nginx/1.16.0 Transfer-Encoding: chunked X-Content-Type-Options: nosniff X-Frame-Options: SAMEORIGIN X-Powered-By: PHP/7.3.5 X-Robots-Tag: noindex Accept: */* Accept-Encoding: gzip, deflate Accept-Language: ja,en-US;q=0.9,en;q=0.8,zh;q=0.7,vi;q=0.6 Connection: keep-alive Content-Length: 16 Content-Type: application/x-www-form-urlencoded; charset=UTF-8 Host: terad2.local Origin: http://terad2.local Referer: http://terad2.local/vote2021/ User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36 X-Requested-With: XMLHttpRequest action: my_action
【レスポンス】 0
該当のソースコード
html
1<?php 2/* 3 * Template Name: vote2021 4 * Template Post Type: page 5*/ 6?> 7 8<!DOCTYPE html> 9<html> 10 11<head> 12 <meta charset="utf-8"> 13 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 14 <title>2021</title> 15 <link href="<?php echo get_stylesheet_directory_uri(); ?>/vote2021/css/style.css" media="all" rel="stylesheet" type="text/css" /> 16 17 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 18 <script type="text/javascript" src="http://terad2.local/wp-content/themes/cocoon-master/vote2021/js/vote.js"></script> 19 20</head> 21 22<body> 23 <div class="footerFixed"> 24 25 26 <header id="header"> 27 <div>2021</div> 28 </header> 29</body> 30 31</html>
php
1(functions.php) 2 3<?php 4 5function my_enqueue() { 6 7 // Ajaxの処理を書いたjsの読み込み 8 wp_enqueue_script( 'ajax-script', '//terad2.local/wp-content/themes/cocoon-master/vote2021/js/vote.js', array('jquery'), null, true ); 9 // 「ad_url.ajax_url」のようにしてURLを指定できるようになる 10 wp_localize_script( 'ajax-script', 'ad_url',array( 'ajax_url' => admin_url( 'admin-ajax.php') ) ); 11 } 12 add_action( 'wp_enqueue_scripts', 'my_enqueue' ); 13 14 15// サーバー側(PHP)の処理 16function do_myajax() { 17 18 $list = array( 19 0 => array( 20 'id' => 1, 21 'name' => '名前', 22 'hoge' => 'ほげ1' 23 ), 24 1 => array( 25 'id' => 2, 26 'name' => 'メーメー', 27 'hoge' => 'hogehoge2' 28 ), 29 2 => array( 30 'id' => 3, 31 'name' => 'M', 32 'hoge' => 'ホゲホ' 33 ) 34 ); 35 header("Content-type: application/json; charset=UTF-8"); 36 echo json_encode($list); 37 wp_die(); 38 } 39 // ログインしているユーザー向け関数 40 add_action( 'wp_ajax_my_action', 'do_myajax' ); 41 // 非ログインユーザー用関数 42 add_action( 'wp_ajax_nopriv_my_action', 'do_myajax' ); 43 44?>
javascript
1(vote.js) 2 3jQuery(document).ready(function($) { 4 jQuery.ajax({ 5 type: "POST", 6 //url: ad_url.ajax_url, 7 url: '//terad2.local/wp-admin/admin-ajax.php', 8 data: { 'action' : 'my_action' } 9 }).done(function(data){ 10 console.log(data); 11 console.log("done..."); 12 }).fail(function(XMLHttpRequest, textStatus, error){ 13 console.log(error); 14 console.log(XMLHttpRequest.responseText); 15 }); 16 });
追加情報
本番サイトからローカルに、データをインポートした環境です。
当ページはcocoonの子テーマで、固定ページです。
●ファイルディレクトリ
wp-content/themes/cocoon-master/vote2021
・html
・functions.php
・/js/vote.js
補足情報(FW/ツールのバージョンなど)
PHP 7.3.5
Local by Flywheel
あなたの回答
tips
プレビュー