JavascriptからSQLへ繋ぎ方が分からない

質問

archive.phpに信号を渡すのに$配列を渡して表示させることは可能でしょうか？
Ajaxでphp側のMySQLを呼び出すのは難しそうなため懸念しております。

※参考サイト
https://blog.ver001.com/javascript-select-onchange-display-none/

※該当ファイル(strorage.phpはcronです。)
https://wandbox.org/permlink/fhJ2DJMkP50tbNRn

<div class="selectbox">
<select name="top">
<option value="">年を選択</option>
<option value="op-a">2021</option>
<option value="op-b">2022</option>
</select>

<select name="op-a">
<option value="">2021グループから選択</option>
<option value="op-a-1">1</option>
<option value="op-a-2">2</option>
<option value="op-a-3">3</option>
<option value="op-a-4">4</option>
<option value="op-a-5">5</option>
<option value="op-a-6">6</option>
<option value="op-a-7">7</option>
<option value="op-a-8">8</option>
<option value="op-a-9">9</option>
<option value="op-a-10">10</option>
<option value="op-a-11">11</option>
<option value="op-a-12">12</option>
</select>

<select name="op-b">
<option value="">2022グループから選択</option>
<option value="op-a-1-1">1</option>
<option value="op-a-1-2">2</option>
<option value="op-a-1-3">3</option>
<option value="op-a-1-4">4</option>
<option value="op-a-1-5">5</option>
<option value="op-a-1-6">6</option>
<option value="op-a-1-7">7</option>
<option value="op-a-1-8">8</option>
<option value="op-a-1-9">9</option>
<option value="op-a-1-10">10</option>
<option value="op-a-1-11">11</option>
<option value="op-a-1-12">12</option>
</select>

<style>
.selectbox select:not(select[name=top]) {
display:none;
}
</style>

<script>
window.addEventListener('load', function () {
//onchangeイベントの設定
document.querySelectorAll('.selectbox select').forEach(elm => {
elm.onchange = function () {
let elm2 = document.getElementsByName(this.value)[0];
if (elm2) {
elm.style.display = 'none';
elm2.style.display = 'block';
}
}
});

</script>

回答No.23

AsarKingChang · ベストアンサー

>jQueryについてお聞きするかもしれません
ぜんぜんOKですよ～
わかる範囲なら、OKよ～

回答No.22

AsarKingChang

あｗ、CSSは、フロントのエンジニアに任せてるので、
あんまり詳しくなくてごめんね＾＾
水商売で暇つぶしにPHPを勉強した程度だったので＾＾
あはは～（なんせ、客いなくて＾＾）

補足

返答ありがとうございます
CSSの問題なのかPHP問題なのかjQ ueryの問題なのかはっきりしていないので、まずはCSSと PHPを見返してみて違った場合、jQueryについてお聞きするかもしれません、その際はよろしくお願い致します

回答No.21

AsarKingChang

>申し訳ありません。変数設定が抜くていることが原因だったようです。
あ、、見る前に完結しちゃったか＾＾
んま、動くとすっきりしますからね～

補足

プルダウンについてどうしても分からないところがあるのですが、常に開きっぱなしのアコーディオンを閉じるためにどのように修正すればよいでしょうか？
cssのdisplay: none;が、"ul.archive-list > li:not(.acv_open) > ul" が無いので効いていないようですが、jQueryの設計を直せばいいのか自分では分からなかったためアドバイスお願い致します。

<ul class="archive-list"><li class="year current acv_open">2022<ul class="month-archive-list"><li><a href="http://www.gsdfgsdgs.cfbx.jp/2022/6">2022年6月</a>(4)</li><li><a href="http://www.gsdfgsdgs.cfbx.jp/2022/5">2022年5月</a>(6)</li></ul><li class="year current acv_open">2021<ul class="month-archive-list"><li><a href="http://www.gsdfgsdgs.cfbx.jp/2021/7">2021年7月</a>(2)</li></ul></li></ul></div>

//archive.js
jQuery(document).ready(function ($) {
//年月別アーカイブ表示用
$(".archive-list li").click(function () {
//
if ($(this).next(".month-archive-list").is(":visible") || $(this).hasClass("acv_open")) { //既に開いている場所なら
$(".month-archive-list", this).slideUp("fast"); //閉じる
$(this).removeClass("acv_open"); //.acv_open削除

}
else { //閉じている場所なら
$(this).siblings().children(".month-archive-list").slideUp("fast"); //その他リストを閉じる
$(".month-archive-list", this).slideDown("fast"); //開く
$(".year").removeClass("acv_open"); //.acv_open削除
$(this).addClass("acv_open"); //.acv_open付加
}
});
});

//front-page.php
<?php
$sql = "
・・略・・
";
$query = $wpdb->prepare($sql);
$ym_items = $wpdb->get_results($query);

$ym_array = [];
foreach ($ym_items as $item) {
$ym_array[$item->y][$item->m] = $item->c;
}
$this_year = (string) idate('Y'); // 現在の年を、4桁の文字列で取得
$out = '<ul class="archive-list">';
foreach ($ym_array as $y => $y_items) {
if ($y == $this_year) {
$out .= '<li class="year acv_open current">'.$y;
} else { // それ以外の年の場合
$out .= '<li class="year">'.$y;
}
$out .= '<ul class="month-archive-list">';
foreach ($y_items as $m => $c) {
$url = home_url("{$y}/{$m}");
$out .= "<li><a href=\"{$url}\">{$y}年{$m}月</a>({$c})</li>";
}
$out .= '</ul>'; // 閉じる <ul class="month-archive-list">
}
$out .= '</li>'; // 閉じる <li class="year">
$out .= '</ul>'; // 閉じる <ul class="archive-list">
// HTMLの出力
echo $out;
?>

//style.css
/* acv_openクラスをもたないリスト項目の子リスト（month-archive-list）は、デフォルト非表示に */
ul.archive-list > li:not(.acv_open) > ul {
display: none;
}

回答No.20

AsarKingChang

>https://wandbox.org/permlink/Kaaa2aXmUZqH170W
見てみたのですが、こっちで開くと、
エラーがでまくって、グチャグチャ画面でした。
そちらでログインしてないと、見れないサイトかも

お礼

申し訳ありません。変数設定が抜くていることが原因だったようです。

※修正コード
https://wandbox.org/permlink/C580FONSOoxBIlqb

補足

現状scriptファイルはconsoleを確認すると読みこまれているのですが、コンテンツは何も表示されず、エラー文も出ていないため原因が特定できていない状態です。

※参考サイト
https://cosybench.com/customize-wp-archives-look/

scriptタグが混入しておりました。申し訳ありません。
https://wandbox.org/permlink/hrmHTVxGKgQqOqsh

※jsファイルは分けました。
archive.js
<script>
jQuery( document ).ready( function( $ ) {
// @link: http://kachibito.net/snippets/basic-panel
//年月別アーカイブ表示用
$(".archive-list &gt; li").click(function() {
//@link: https://stackoverflow.com/questions/6656202/jquery-slidedown-child-ul
if($(this).next(".month-archive-list").is(":visible") || $(this).hasClass("acv_open")){ //既に開いている場所なら
$(".month-archive-list", this).slideUp("fast"); //閉じる
$(this).removeClass("acv_open"); //.acv_open削除

}
else { //閉じている場所なら
$(this).siblings().children(".month-archive-list").slideUp("fast"); //その他のリストを閉じる
$(".month-archive-list", this).slideDown("fast"); //開く
$(".year").removeClass("acv_open"); //.acv_open削除
$(this).addClass("acv_open"); //.acv_open付加
}
});
});
</script>

回答No.19

AsarKingChang

これを使うのであれば、
1. front-page.php: のselect要素で配列にしたいもののname属性値に [] をつけておく
2. front-page.php: Fetch APIでFormDataをarchive.phpにリクエスト
3. archive.php: 受け取った配列を元にSQL文生成→クエリを発行→結果をJSONで出力
4. front-page.php: JSON.parse()して後続処理

フロントを通してはダメです。STDINという標準入力をWordPressが
破壊してしまう為、動作しません。
先ほどのapi.phpに対して直接通信をかけてみてください。
そのapi.phpの中でWordPressの初期化経路を通さずに、
DBを使えば実現は可能と思います。
AJAXなので、接続はJavaScript側からなので。
通信そのものには、WordPressは使えないです。
WordPressを通せばそれ自体がフロント動作をしてしまうので。
（全部ぶった切れば、APIとしての出力＝VIEWは
　確か行けるはずですが、STDINを乗っ取るのがきついはず）
ひとまず、あれ単体で、流れがわかれば、JavaScript<>APIの
挙動はわかるかな～と。
当初の目的は、ArrayをArrayのままでPHPと受け渡したい～って
事だったので、一応は、満たした気がしてますが。。
独自APIをWordpressにかぶせようと！までいくと、話がややね。。
ってのは、ありましたね。

補足

アドバイスありがとうございます。

Javascriptを作るのに時間がかかるため、仮のアーカイブを作成しているのですが、記事が表示されません。
考えられる原因はありますでしょうか？

※参考サイト
https://cosybench.com/customize-wp-archives-look/

※考えた対策
consoleでJavascriptの読み込み確認
SQLに直接配列が渡るようにコード修正
AND (post.post_date LIKE %s OR post.post_modified LIKE %s )

※Javascriptコード
jQuery( document ).ready( function( $ ) {
// @link: http://kachibito.net/
//年月別アーカイブ表示用
$(".archive-list &gt; li").click(function() {
//@link: https://stackoverflow.com/questions/6656202/jquery-slidedown-child-ul
if($(this).next(".month-archive-list").is(":visible") || $(this).hasClass("acv_open")){ //既に開いている場所なら
$(".month-archive-list", this).slideUp("fast"); //閉じる
$(this).removeClass("acv_open"); //.acv_open削除

}
else { //閉じている場所なら
$(this).siblings().children(".month-archive-list").slideUp("fast"); //その他のリストを閉じる
$(".month-archive-list", this).slideDown("fast"); //開く
$(".year").removeClass("acv_open"); //.acv_open削除
$(this).addClass("acv_open"); //.acv_open付加
}
});
});

※該当ファイル
https://wandbox.org/permlink/Kaaa2aXmUZqH170W

回答No.18

AsarKingChang

Chromeなどの、console.logのデバッグウインドウにて、表示される実行結果
PHPのソースで、get_waaが全部に+1していて
put_waaはマイナスしている。
それ以外は、エラーを返しているというのが、わかればOK
後は、ほしいアクションに対して、API機能を追加していけば、
アプリの完成です。
このPHPのswitch部分で、DBとの通信を行って、結果をexportすればいいだけなので。。
「ファイルを作る」って考えはなく、すべてがメモリ上で完結するので、
無駄はないでしょうね。
JSONをPHPで読み取り好き勝手に書き換えてJSONで返却できる事
それを、JavaScriptが受信して、その結果で好きなことを行えること。
ってのを、サンプルにしたものになります。

一応作ったので、アップしておきますが。
今回の用途で、役に立つかは＾＾わかりませ～ん（あはは）

補足

ありがとうございます。
後ほど詳しく読み返してみたいと思います。

1つお聞きしたいのですが、wordpressとJavascriptでデータのやり取りを行う場合、以下の方法でも可能でしょうか？

1. front-page.php: のselect要素で配列にしたいもののname属性値に [] をつけておく
2. front-page.php: Fetch APIでFormDataをarchive.phpにリクエスト
3. archive.php: 受け取った配列を元にSQL文生成→クエリを発行→結果をJSONで出力
4. front-page.php: JSON.parse()して後続処理

回答No.17

AsarKingChang

JavaScript(Jquery)のAJAXの便利系？サブルーチン
ーーー
(function () {
"use strict";
/*
* post_data: post data
* callback_success: call back "success"
* callback_error: call back "error"
* callback_this: call back this pointer
* mode: 1=json 2=msgpack(今回のサンプルでは未対応)
*/
function ajaxbin(_post_data,_callback_success,_callback_error,_callback_this,_mode) {
this.post_data=null;
this.callback_success=null;
this.callback_error=null;
this.callback_this=null;
this.mode=1;
this.url='api.php';
this.set_data(_post_data);
this.set_callback(_callback_success,_callback_error,_callback_this);
this.accept_mode(_mode);
};
ajaxbin.prototype.accept_json = function() {
this.mode=1;
};
ajaxbin.prototype.accept_msgpack = function() {
this.mode=2;
};
ajaxbin.prototype.accept_mode = function(_mode) {
this.mode=(typeof _mode==="undefined" || _mode<1 || _mode>2)? this.mode:_mode;
};
ajaxbin.prototype.set_callback = function(_callback_success,_callback_error,_callback_this) {
this.callback_success=(typeof _callback_success==="undefined")? this.callback_success:_callback_success;
this.callback_error=(typeof _callback_error==="undefined")? this.callback_error:_callback_error;
this.callback_this=(typeof __callback_this==="undefined")? this.callback_this:__callback_this;
};
ajaxbin.prototype.set_url = function(_url) {
this.url=(typeof _url==="undefined")? this.url:_url;
};
ajaxbin.prototype.set_data = function(_post_data) {
this.post_data=(typeof _post_data==="undefined")? this.post_data:JSON.stringify(_post_data);
};
ajaxbin.prototype.response_type_check = function(text) {
if (text.indexOf('application/x-msgpack')!=-1) return(2);
if (text.indexOf('application/json')!=-1) return(1);
return(0); // err
};
ajaxbin.prototype.success = function(text) {
if (this.callback_success!==null) {
if (this.callback_this!==null) {
this.callback_success.bind(this.callback_this)(text);
}else{
this.callback_success(text);
}
}
};
ajaxbin.prototype.error = function(text) {
if (this.callback_error!==null) {
if (this.callback_this!==null) {
this.callback_error.bind(this.callback_this)(text);
}else{
this.callback_error(text);
}
}
};
ajaxbin.prototype.event = function(e) {
var event=e.currentTarget;
if (event.status===200) {
var responsetype=this.response_type_check(event.getResponseHeader('content-type'));
switch(responsetype) {
case 2: // msgpack
var byteArray=new Uint8Array(event.response);
var obj=msgpack.decode(byteArray);
this.success(obj);
break;
case 1: // json
var byteArray=new Uint8Array(event.response);
var enc=new TextDecoder("utf-8");
var json=enc.decode(byteArray);
var obj=JSON.parse(json);
this.success(obj);
break;
default: // error
this.error('エラー');
break;
}
}else{
this.error('エラー');
}
};
ajaxbin.prototype.go = function(_post_data,_callback_success,_callback_error,_callback_this,_mode) {
this.set_data(_post_data);
this.set_callback(_callback_success,_callback_error,_callback_this);
this.accept_mode(_mode);
this.xhr=new XMLHttpRequest();
this.xhr.open('POST',this.url,true);
this.xhr.responseType='arraybuffer';
this.xhr.setRequestHeader('Content-Type','application/json');
if (this.mode==2) {
this.xhr.setRequestHeader('Accept-Extra-Encoding','msgpack');
}
this.xhr.onload = this.event.bind(this);
this.xhr.send(this.post_data);
};
window["ajaxbin"] = ajaxbin;
})();
ーーー
MSGPACKに元々は対応してるのですが、今回不要の為、
部分的にそぎ落としており、動作はしませんが、
将来、MSGPACKに対応する日があったら、拡張すればOKです。

回答No.16

AsarKingChang

PHP部分
ーーー
<?php
class waa
{
function header()
{
/* 自分が持ってるドメインを書いておけばそれ以外から使えなくできる */
header( 'Access-Control-Allow-Origin: *' );
header( 'Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept' );
header( 'Content-Type: application/json; charset=utf-8' );
}

function import()
{
$json = file_get_contents( "php://input" );
if ( $json === "" ) return [];
$contents = json_decode( $json, true );
if ( $contents === null ) return [];
return ( $contents );
}

function export( $data )
{
echo json_encode( $data );
exit;
}
}

$n = new waa();
$n->header();
$request = $n->import();
/* 後はAPI名で、動作を変えればOK(本当はresponseという変数で送り返すほうがいいんだがテストなのでこれでいい) */
switch ( $request[ 'api' ] )
{
/* 要するに、こいつの値で、SQLを動かしてSELECTした結果をresponseで送り返せばそれで終わりです。
* 例えば、
* 'select * from なんか？ where year=' . $request[ 'year' ] . ' and month=' . $request[ 'month' ] . ';';
* とか。それをレスポンス変数に突っ込んで、戻ればそれでOK
* インジェクションフィルタを入れてないので、外部アタックに注意
* PDOなしのSQLなら、mysqli_real_escape_string( DBハンドル , 文字列 )
* 最初からSQL関数があったりするので、それ使えばOK
* 読み取りは、この程度。。
* $out = [];
* while ( $row = mysqli_fetch_assoc( $result ) )
* {
* $out[] = $row;
* }
* return ( $out );
*/
case 'get_waa':
$request[ 'year' ]++;
$request[ 'month' ]++;
$request[ 'status' ] = 'ok';
$n->export( $request );
case 'put_waa':
$request[ 'year' ]--;
$request[ 'month' ]--;
$request[ 'status' ] = 'ok';
$n->export( $request );
default:
$request[ 'status' ] = 'error';
$n->export( $request );
}
ーーー
みればわかると思いますが、ほぼほぼ「コメント」です。

回答No.15

AsarKingChang

好きな名前.html
ーーー
<html lang="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!-- ---------------------------------------------------------------------- -->
<script src="api_assets/jquery-3.5.1.min.js"></script>
<script src="api_assets/ajaxbin_new.js"></script>
<script>
$(function () {
var class_le = function () {
this.update = function (t) {
console.log(t);
// こいつの値でDOM構築を！
};
this.start = function () {
var data = {"api": "get_waa", "year": 2088, "month": 15};
var ajax = new ajaxbin(data, this.update, null, this);
/* デフォルトは、api.phpなので、それ以外ならオーバーライド */
ajax.set_url("api_waa.php");
ajax.go();

/* API名を変えてコールしてみる */
data["api"] = "put_waa";
ajax.go(data);
data["api"] = "xxxx";
ajax.go(data);

return (false);
};
};
$(document).ready(function () {
console.log("ready api.html");
var waaa = new class_le();
waaa.start();
});
});
</script>
</head>
</html>
ーーー
この後、追加するPHPのファイル名を
ajax.set_url("api_waa.php");
これで指定してください。もし、api.phpで保存した場合、
この行は不要です＝デフォルトがapi.phpな為。

回答No.14

AsarKingChang

WordPressだと思わないまま作ったので。
あら？って空気にはなっちゃいましたが。
単体では、動くので、こっちで作ったサンプル。。いります？
なんか、いらなくなった気がすでにたっぷりしてて＾＾
どうしたもんかな～とおもったもので＾＾
3ファイル
PHPと、JSと、JSのAJAXライブラリ
のみなんですけどね＾＾

補足

勉強になることは必ずあると思いますので、ファイルコードをくださると助かります。
よろしくお願い致します。

回答No.13

AsarKingChang

>渡すのは固定になります。
JS->PHPでいいんですね。(方向を間違うと意味がかわるので)

>プルダウンで1〜12の数字を選択してその値と一致した記事を表示させるので、動的に変化する事はないと思われます。

という事は、例えば、2021/09に記事がなくても、
選択肢には「2021/09」はあるという事ですね。

私考えていたイメージは
2021/01～2022/12の間に投稿がある「月」をくださ～い
JS->PHPすると、PHPから
実在する記事がある月のArrayが返る。
それをフロントで表示し選ばせると、
2022/09を選ぶとその月の記事を送り返す！。

なのかな～とおもって、動的？って聞いてた感じでしたね。
（やる気になれば、select count(n) でその月の記事数も
　返せちゃいますしね。。）

2022=
[1]=0, 1月に0件　（これを、そもそもArrayに含まない事も含んでHTML側でdisplay:noneするのもできるのでありかなと）
[2]=5, 2月に5件（0月はないので、配列は１から言ってるが、よくあるのが、0月に、その年の合計を入れてるAPIは多いですよ）
]
などを返せば、サイト側で、マスク処理などやりやすいですからね！

補足

JS->PHPで大丈夫です。
選択肢には常に1~12は出ている状態にするつもりです。
といいますのも記事は毎日上がる想定なので、記事がない月(日)というのはありません。