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

AsarKingChang

え？使うのはJAVAなんですか？
JavaScriptじゃないのですかね？
>JAVA→JSONで$に変える→archive.php→SQL→JSON→JAVAという流れで良いでしょうか？

ひとまずJavaScriptに付属のJSONで、
オブジェクトを文字にシリアライズ。
配列や、オブジェクト、変数などをごちゃ混ぜに記載可能です。

「＄に変える」って言葉はありません。
archive.phpに入ったとき、変数の名前が＄なだけで
別に内容が変わったわけではないので。
同じように帰り値を今度はPHP側のJSONでシリアライズ
で、送り返す。
それをAJAX(XHR)で受け取るという具合です。

なお、地味な話ですが。
{"abc":"def"}
これは、変数abc=文字の"def"が入るというJSONなのですが、
取り込むと運悪く、「"」(ダブルクオート）も入るので、
例えば、substr($変数,1,-1)　2文字目で始まり最後の文字を捨てた物
とかで、フィルタする必要があったりします。

知ってると思いますが、PHPの場合「型」が
ないので、$a=123;次の瞬間$a="abc"が許されてしまう。
つまり、文字なのか数字なのか言語的には区別ができてない。
せいぜいis_intなどで、判定するのが限界なので、
そこだけ注意！

で、あ～んじゃ～is_intじゃなければダブルクオートついてる
のだろうから、フィルタしちゃえばいいのね？
って考えると、
{"abc":null}
これの時、ハマります。あとからそれが、文字のnullなのか、
値がなかったのかが区別がつかなくなるという具合。

PHP<>JavaScriptでの相互通信では、多くの人がここで、
1回はトラップ踏みますよ。
（やってみればわかります）

などが、気を付けるポイントかな～
ただ、これだけは約束しますが。
これなれると病みつきですよ！
（ガチです）

お礼

JSONを使いオブジェクトを文字にシリアライズしたいのですが、2022がconsole.log(result);で確認しても表示されません。何が原因でしょうか？

<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",
};

//オブジェクトをまとめる
let allobj = Object.assign({}, objA, objB);

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

補足

Javascriptでした。申し訳ありません。
調べながら再度組んでみます。助かりました。アドバイス感謝します。

回答No.1

AsarKingChang

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

配列を渡したいなら手っ取り早いのはJSONでしょうね。
で、受け側のPHPでDBと通信させて同じように
帰り値としてJSONを返却するという流れですね。
主にAPIという流れになりますが。
ゲームなどでは、よく使う流れなので、
特に違和感はないですよ。

お礼

設計についてもう少し深くお聞きしたいのですが、
JAVA→JSONで$に変える→archive.php→SQL→JSON→JAVAという流れで良いでしょうか？

補足

アドバイスありがとうございます。
1度調べて組んでみます。