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.12

AsarKingChang

>front-page.phpの170行目に2段階式プルダウンを設置してwordpressのSQLに飛ばすことは出来るのでしょうか…
ここは、どのような物を考えてますか？
動的？固定？
例えばAPIから、今回表示するものを取得して表示もできますし。
固定で常に決まった表示もできますが。
また、その中から選ぶものは１つでいいんですよね？
つまり、2021/2022・・・1～12の選択肢があっても
例えば、2022/9　のみ！など。。

補足

回答ありがとうございます、
渡すのは固定になります。
プルダウンで1〜12の数字を選択してその値と一致した記事を表示させるので、動的に変化する事はないと思われます。

回答No.11

AsarKingChang

>jQuearyでプルダウンを作成して一度ファイルをクッションに挟んでもデータの送受信は不可能でしょうか？
可能でしょう。たださっきも言いましたが、
ファイルを挟む必要はないですよ。
AJAXなので、そもそもWPを経由しませんので。
＝逆にそこが問題なんです。
フロントを持たないWPになるので。

お礼

設計について教わりたいのですが、archive.phpの254行目のSQLで過去の記事の検索をかけています。
front-page.phpの170行目に2段階式プルダウンを設置してwordpressのSQLに飛ばすことは出来るのでしょうか…
通常wordpressでSQLを使う場合、wordpress固有の検索欄 <?php get_search_form(); ?>などから情報を得るので、Javascriptで作成したものから記事の選別ができるのか心配です…
何か分かることがありましたら教えていただけると幸いです。

※該当コード
$query = $wpdb->prepare($sql, "%$date_query%", "%$date_query%");

※ファイル一覧
https://wandbox.org/permlink/L2deprlesXzI1nRz

補足

説明ありがとうございます。
セキュリティなどの問題が出てくることは考えられますね。

回答No.10

AsarKingChang

げｗ、archive.phpって、WordPressじゃん！
これの上でやるのは、逆にきついですよ。
やるとしたらJSONの「後」にWPを動かしつつ、
WPの後で、JSONを送る必要があります。
ってのは、APIなので、フロントデータの送受信は出来ないのです。
本当にそれ「のみ」が送られるので、無駄がなく早いのですが。

んま～どう使うかは、わからないのですが、
後で、ファイル3個ほど！
作ったので。。1個単位で投稿しますね。
とりあえず、JSONとは、なんぞや！ってのと。
あ～そういうことね～ってのがわかる程度のサンプルですが。

補足

回答ありがとうございます。調べて気が付きました。
jQuearyでプルダウンを作成して一度ファイルをクッションに挟んでもデータの送受信は不可能でしょうか？

回答No.9

AsarKingChang

>文字にシリアライズした後が分からなかったのですが、調べてみると何となく分かりました。
わかってくれば簡単でしょ！
>jsonファイルをjavascript(node.js)で作成して、
node.jsいらんです。
クライアントのJavaScript->サーバーのPHP->返り値をJavaScript
こんだけです。

>そこに記載されている配列をPHP側で文字をデコードさせそれをSQLに渡す認識として間違っていることはありますでしょうか？
デコードというよりJSONを取り込めばすでに、Object（PHPの場合、ArrayもObject扱いなので、そのままいける）

>jsonファイルを作成せずにSQLに渡す方法が分からなかったため、ファイル作成が必須なのかと考えております。
ファイルは不要です。

DBの使い方は、わかってる認識でOKでした？（PHP上での）
こちらで作るサンプルにそこは必要あるのかな～の確認です。
恐らく質問者さん、私作ったサンプルで、ほとんどを
「あ～わかった～」で終わると思います。
問題なのはOKWAVEがあまり長いソースを公開できない事（ｗ）
それだけかな。。

補足

流れを理解するのに時間は掛かりましたが、設計が分かると作れそうな気がしています。SQLはarchive.phpの268行目に代入する形になると思います。Javascriptと組み合わせたことがないので心配ですが。
$query = $wpdb->prepare($sql, "%$search_query%", "%$search_query%");

PHPとJavascriptのつなげ方は、PHPで$変数＝オブジェクトという形になるのでしょうか？
//PHP側=Javascript側
$twentyone = "objA";
$twentytwo = "objB";

(ArrayもObject扱いなので、そのままいける)
arryでArray[]={objectA},{objectB};でそのまま使えるということですかね…

※archive.php
https://wandbox.org/permlink/Wx5FJwRp6dYqne9H

回答No.8

AsarKingChang

>SQLに配列を渡す際にどちらのボタンから押されたのか信号が必要になる？気がするのですが、次のステップが分からず足踏みをしております。

いや～
{
year:202X,　選んだ年
month:XX 選んだ月
}
の形式になるように整形してから送り出せばいいので、
2個送る必要はないと思いますよ。そもそも、「選択肢としてどっちか」なわけだから

PHP側は、年と月がわかれば、「どっちを押したか？」は元々いらない情報ですし。

補足

回答ありがとうございます。
文字にシリアライズした後が分からなかったのですが、調べてみると何となく分かりました。
jsonファイルをjavascript(node.js)で作成して、
そこに記載されている配列をPHP側で文字をデコードさせそれをSQLに渡す認識として間違っていることはありますでしょうか？
jsonファイルを作成せずにSQLに渡す方法が分からなかったため、ファイル作成が必須なのかと考えております。

回答No.7

AsarKingChang

やってみたら確かに外Array
[ {} ]
はエラーでますね。なので、外Objectで、
{ list : [] }
みたいに、中Arrayにすれば、問題はないなってな状態でした。

補足

なるほど、中に[]を配置して配列にすれば問題ないのですね、勉強になりました。

回答No.6

AsarKingChang

let result = JSON.stringify([objA,objB]);
これ、今私が書いた書き方と同じですよ。
これと、
let objA = [{
year: 2021,
month: [1,2,3,4,5,6,7,8,9,10,11,12],
},{
year: 2022,
month: [1,2,3,4,5,6,7,8,9,10,11,12],
}];
これは、Array[]={Object},{Object};
なので、同じですね。
そもそも、2個に分ける意味はないです。
わけることで、トラフィック増えるだけです。
1個目のJSONと
2個目のJSONをさらに別のJSONでエンコードじゃ
コストがかかるだけです。

各値がStringになってるのをこちらでIntにしたのは、
ループで回しやすくするためです。
<option value="op-a-12">12</option>
これとかをDocument.write的（んま、大抵はinnerHTMLですが）
で動的構築させる方が、ソースも短くなり、
ループなので、バグが出にくいですからね～
（全部間違いか、全部動くかの排他ですし）
ってのを「年を選択」の数回せば、数行で完成するな～と

あと、HTMLで入手できる値と
JavaScriptに入って来る値を、別々に考えたほうがうまく行きますよ。
HTML→適切な変数に格納していく。
という工程を挟むことで、フロントと共存しやすくなります。
そうじゃないと、フロントのエンジニアがJavaScript変数まで
考慮しないといけなくなり、双方が苦労するだけで、
メリットが出ないので、パート分けするほうが、
最終成果物は綺麗になりますよ。

で、JavaScriptからAJAXなどでPHPに送る時も、
今度はPHPのURL=この場合はAPIと呼ぶ
の形式に再度並べ替える！
同じようにレスポンスを受け取ったら、JavaScriptで効率が
良い形式に並べ替える。

それを、さらにHTML側のDOMに使いやすいように再構築。
と、各担当が完結する流れを作ったほうが、長い意味でプラスです。

大抵作ったものって数日もすれば、なにやってたっけ～？
になるだけなので、1つの部品単位で完結したフォーマットを
持ってそれを資料にしたら、終わり！って感じが
理想ですね。Gitコミットも綺麗になりますし。
HTMLしか書き換える必要がないのに
JavaScriptに手を付けて、さらにPHPまでいじる？
ってなコミログじゃ、誰が何のために何をいじったんだ？
って感じになって、マージしにくくなるだけですからね。
これじゃ、バグが出やすい流れなのは当たり前だ～って
怒られちゃいますからね＾＾/今回はGit関係ないけど。

補足

アドバイスありがとうございます。
今回のコードでJSONでオブジェクトを文字にシリアライズすることは出来ました。

質問が1つありまして、2021と2022のボタンクリック識別はJavascriptに設置することになるのでしょうか？

SQLに配列を渡す際にどちらのボタンから押されたのか信号が必要になる？気がするのですが、次のステップが分からず足踏みをしております。

回答No.5

AsarKingChang

別件一つ、
php_learnさんって、JQは行けます？
この件面白そうなので、明日かな？時間あったら、
ソース書いてみようとは思うんですが。
ベタのJavaScriptでの、セレクタだと、書きにくくて＾＾
（時間かけてコード依存性がある物をあんまり＾＾
　やりたくないな～って、そんだけなので、
　ベースCDNの物で、よければ。
　別にDLしてもいいけど）
その他は、特に使わないので、JS+PHPだけでOKですけど。

あと私ソース書くとき、n=function () {}式が多い。
function abc() {}だと、いらなくなってもメモリに関数"abc"が
居座ってしまって、ガベージされないため。
なので、癖もあるのですが、ほぼ？動的配置にしちゃう
癖があります＾＾abc: =() {的}ニュアンス。
関数を参照しているabcが失われるとき実体の関数も
消滅してほしいスタイルです。

雰囲気が、何らかの予約システムの土台に見えたので、
そういう雰囲気でいいのかな～？とは感じてますけど。
ただ、HTMLって各フォームの「onChange」って
実際の所グダグダですよね。

書き換えてすぐリスナ反応する奴と、書き換えた後、
フォーカス移動（カレントを失うとき）発動する奴が、
混在してるので、実際の所、本気でやろうとすると、
やや低速のTimeoutで監視しないと、まともにならない気が
ややすることもありますね。
input textだと、書いてる最中すらもonChange対象なのに
select系って、オプションでマルチセレクトがあることもあり、
1個選んだだけでは、まだ「確定していない」と判断され。
その時点では割り込まれないなど。ここら辺グダグダ＾＾

で、全部のバリデが通過してるかを裏にBoolien入れて
それの結果でSubmitをShowHideするかしないか。。
までやらないと、空気が成立しない・・・
なんて気がしてるほどです＾＾

（ここ別件で、本件の話ではありますが、回答ではない件です）

補足

回答ありがとうございます。JavascriptもjQueryも少しずつしかできないため考えものですが、jQueryのほうが分かりやすいのであればそちらの方がよいかもしれません。2段階式プルダウンに年月をそれぞれ選択して、SQLに渡して記事検索して返すアーカイブ機能を作成したいのですが、Javascript、jQueryどちらでも勉強になると考えています。

回答No.4

AsarKingChang

<html>
<script>

/*
指定では、yearとmonthはString形式だったが、
yearをINT、monthをArrayにしている。
直接数値として比較したり、
特定の月を省略したりできるようにするために効率が良いため
*/

let objA = [{
year: 2021,
month: [1,2,3,4,5,6,7,8,9,10,11,12],
},{
year: 2022,
month: [1,2,3,4,5,6,7,8,9,10,11,12],
}];

let json=JSON.stringify(objA);
console.log(json);

/*
ここから下には、一切objAは出現していないが、正確に
元のobjAを再現した、t_objが活動できている
*/

const t_obj = JSON.parse(json);

for (let one of t_obj) {
console.log(one.year);
for (let m of one.month) {
console.log(m);
}

}

console.log("end");

</script>
</html>
--
試してみましたが、console.log綺麗なもんでしたよ＾＾
もし、動かない？ってことであれば、そもそもHTML側の
パラメタ抜き側ですかね？JavaScriptのデバッガーにて
値が入ったか？の方が、確認点かもです。

補足

回答ありがとうございます。下記コードで出力することは出来たのですが、let objAと1まとめにするべきか2つにわけてシリアライズさせるべきか分からなかったため、迷っておりました。PHP側でデコードしてSQL側に配列を渡すようなイメージを考えておりました。

//オブジェクトを定義するvarは受け取る際にエラーが起きそう再宣言のできるletを選択
let objA = {
// プロパティを定義
// キー: 値
year: "2021",
month: "1,2,3,4,5,6,7,8,9,10,11,12",
};
let objB = {
// プロパティを定義
// キー: 値
year: "2022",
month: "1,2,3,4,5,6,7,8,9,10,11,12",
};

arr=[
{2021:objA},{2022:objB}
];

//JSON.stringifyとは、JavaScriptのオブジェクトや値などのデータをJSONに変換するための関数
let result = JSON.stringify([objA,objB]);

//変数「result」に代入
console.log(result);

回答No.3

AsarKingChang

パラメタが、2個になってるので、
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
1個にしちゃってください。
arr=[
{2021:objA},{2022:objB}
];
それか、絶対に数字なら素直に、
arr[2021]=objA;
arr[2022]=objB;
インデックス自体をそれにするとか
配列の子ネストで、解決でしょうね。

お礼

分割コードはこちらでした。[]は機能しないため外しております。
console.log(JSON.stringify(objA));console.log(JSON.stringify(objB));

let objA = {
// プロパティを定義
// キー: 値
year: "2021",
month: "1,2,3,4,5,6,7,8,9,10,11,12",
};
let objB = {
// プロパティを定義
// キー: 値
year: "2022",
month: "1,2,3,4,5,6,7,8,9,10,11,12",
};

補足

回答ありがとうございます。JSON.stringifyをまとめても、let result = JSON.stringify(allobj);

console.logを2つにわけても2021のみ表示されて、2022がどうしても表示されないのですが、何か考えられる原因はありますでしょうか？console.log=JSON.stringify(objA);console.log=JSON.stringify(objB);

<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>

<button type="button" id="selectbox-reset">リセット</button>

<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';
}
}
});
//リセットボタン
document.getElementById('selectbox-reset').onclick = function () {
document.querySelectorAll('.selectbox select').forEach(elm => {
if (elm.name == 'top') {
elm.style.display = 'block';
} else {
elm.style.display = 'none';
}
elm.selectedIndex = 0;
});
};
});

//オブジェクトを定義するvarは受け取る際にエラーが起きそう再宣言のできるletを選択
let objA = [{
// プロパティを定義
// キー: 値
year: "2021",
month: "1,2,3,4,5,6,7,8,9,10,11,12",
}];
let objB = [{
// プロパティを定義
// キー: 値
year: "2022",
month: "1,2,3,4,5,6,7,8,9,10,11,12",
}];

//パラメタ1個にする
arr=[
{2021:objA},{2022:objB}
];

//JSON.stringifyとは、JavaScriptのオブジェクトや値などのデータをJSONに変換するための関数
let result = JSON.stringify(objA,objB),
//変数「result」に代入
console.log(result);
</script>