PHPの変数に入った値をブラウザに表示させたい

作りたいものはDBからランダムなidでのお題をとってきて、それをhtmlに表示させるというものを想定しています。
phpの変数の値をhtml側で表示させようとしているのですが、phpの変数に値が入っていないというエラーが出てきてしまいます。console.logやvar_dumpで確認するとhtml側のphpの変数にきちんと値が入っているのですがブラウザでは値が入っていないと判断されエラーが出てきてしまいます。

どのようにすればブラウザに変数に値が入っているかわかってもらえるのでしょうか？

よろしくお願いします。

発生している問題・エラーメッセージ

ブラウザ上で表示されるエラーです。consoleでは値が入っています

Warning: Undefined array key "random_array" in C:\xampp\htdocs\screen.php on line 11
NULL
Warning: Undefined array key "val" in C:\xampp\htdocs\screen.php on line 14
string(2) "-1"
Warning: Trying to access array offset on value of type null in C:\xampp\htdocs\screen.php on line 20
NULL int(6)
Warning: Trying to access array offset on value of type bool in C:\xampp\htdocs\screen.php on line 63
NULL

該当のソースコード

php
1/screen.jsからシャッフルされた配列とプラス一ずつされる変数を受け取る
2$random_array = $_GET['random_array'];
3var_dump($random_array);
4//結果
5array(7) {
6  [0]=>
7  string(1) "5"
8  [1]=>
9  string(1) "4"
10  [2]=>
11  string(1) "1"
12  [3]=>
13  string(1) "6"
14  [4]=>
15  string(1) "3"
16  [5]=>
17  string(1) "2"
18  [6]=>
19  string(1) "0"
20}
21
22$val = $_GET['val'];
23$val_true = $val - 1;
24var_dump(h($val_true));
25//結果
26string(1) "0"
27
28
29
30//  クリックしたらshuffleされた配列の0番目から順に要素を一つ取り出す
31$random_val = $random_array[$val_true];
32var_dump($random_val);
33//結果
34string(1) "5"
35
36
37
38//idの最大値を取り出して$maxに代入
39try{
40  $pdo = new PDO($dsn, $user, $password , [
41    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
42    PDO::ATTR_EMULATE_PREPARES => false,
43  ]);
44
45  $sql = 'select max(id) from topic';
46  $stm = $pdo->query($sql);
47  foreach ($stm as $maxvalue) {
48      $max = $maxvalue[0];
49  }
50  var_dump($max);
51//結果
52int(6)
53
54
55}catch (PDOException $e){
56  print('Error:'.$e->getMessage());
57  die();
58}
59
60//ランダムなid(random_val)のtopicを取りだす
61$topic = 0;
62
63try{
64  $pdo = new PDO($dsn, $user, $password , [
65    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
66    PDO::ATTR_EMULATE_PREPARES => false,
67  ]);
68
69  $sql = 'select * from topic where id = :random_val ';
70  $stm = $pdo->prepare($sql);
71  $stm->bindValue(':random_val', $random_val);
72  $stm->execute();
73  $result = $stm->fetch();
74
75  $topic = $result["topic"];
76
77  var_dump($topic);
78//結果
79string(54) "最近嫌だったこと、苦しかったことは？"
80
81
82}catch (PDOException $e){
83  print('Error:'.$e->getMessage());
84  die();
85}
86
87$dbh = null;
88
89?>
90
91<!DOCTYPE html>
92<head>
93  <meta charset="utf-8">
94  <link rel="stylesheet" href="screen.css">
95  <title></title>
96</head>
97  <body>
98      <div id="box">
99        <div class="odai">
100          ここにお題が入る
101          <?php echo $topic; ?> //ここでエラーが出ます
102        </div>
103        <button id="btn" name="next">次へ</button>
104
105      </div>
106      <input type="hidden" id="php-val" value="<?= h($max) ?>">
107
108
109      <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="crossorigin="anonymous"></script>
110 </body>
111</html>

javascript
1$(function(){
2
3  var max_val = document.getElementById('php-val').value;
4
5
6  var randoms = [];
7  /** 最小値と最大値 */
8  var min = 0, max = max_val;
9
10  /** 重複チェックしながら乱数作成 */
11  for(i = min; i <= max; i++){
12    while(true){
13      var tmp = intRandom(min, max);
14      if(!randoms.includes(tmp)){
15        randoms.push(tmp);
16        break;
17      }
18    }
19  }
20
21  /** min以上max以下の整数値の乱数を返す */
22  function intRandom(min, max){
23    return Math.floor( Math.random() * (max - min + 1)) + min;
24  }
25
26
27  var i = 0;
28  $('#btn').click(function(){
29    i = i +1;
30
31    var param = {"val":i};
32
33    console.log(param);
34
35    $.ajax({
36        url: "./screen.php",
37        type: "GET",
38        data: {
39          "val":i,
40          random_array : randoms
41        },
42        dataType : "text",
43        timespan:1000
44      }).done(function(data){
45          console.log(data);
46      }).fail(function(XMLHttpRequest, textStatus, errorThrown){
47        console.log("XMLHttpRequest : " + XMLHttpRequest.status);
48    　　console.log("textStatus : " + textStatus);
49    　　console.log("errorThrown : " + errorThrown.message);
50      });
51
52  });
53
54});
55

試したこと

console.logやvar_dumpでphpの変数に値が入っているか確認しました。値は入っていました。
以下console.logで確認したものです。

console.log
1<!DOCTYPE html>
2<head>
3  <meta charset="utf-8">
4  <link rel="stylesheet" href="screen.css">
5  <title></title>
6</head>
7  <body>
8      <div id="box">
9        <div class="odai">
10          ここにお題が入る
11          最近嫌だったこと、苦しかったは？
12        </div>
13        <button id="btn" name="next">次へ</button>
14
15      </div>
16      <input type="hidden" id="php-val" value="6">
17
18      <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="crossorigin="anonymous"></script>
19 </body>
20</html>

補足情報（FW/ツールのバージョンなど）

環境はxammpです。

tanat

2021/03/09 05:47

var_dumpをどこでどのように実行しているかと、その結果の追記をお願いします

souzitarou

2021/03/09 06:00

追記しましたので確認お願いいたします。

tanat

2021/03/09 07:10

ソース的には問題が無いように見えます。一点、追加で確認させてください。 > ブラウザ上で表示されるエラーですと言うのと、Ajaxからアクセスしているであろう状態の関係がよく分からないのです。想像するに、 Ajaxからだとエラーがでずに、ブラウザで直接screen.phpにアクセスすると質問のNoticeが出てしまう　という状況だと予想しましたが、この認識は正しいですか？

souzitarou

2021/03/09 13:17

すみませんAjaxからアクセスするという状態がわからないです。エラーはおっしゃる通りブラウザで直接screen.phpにアクセスすると出ます。

行動規範の内容に同意します

回答2件

$topic;

初期値入れておかないと未定義扱いになります。
それに$random_val自体も未定義のまま使われてます。

selectで何も取れてないのでは。

投稿2021/03/09 05:11

m.ts10806

総合スコア80875

退会済みユーザー

2021/03/09 05:28

あと、fetchall()使っているので、fetch()で1行ずつ取得するのとアクセス方法が違うってのも。

m.ts10806

2021/03/09 05:39

foreachしたうえで個々に添字で取り出してるなら問題なさそうに思ったのですが、そうでもないですか？

souzitarou

2021/03/09 06:02

m.ts10806さん回答ありがとうございます。$topicに初期値を設定しましたが変わりませんでした。また$random_valはajaxから値をとってきていますのでselectで値をとれています

souzitarou

2021/03/09 06:03

m6uさんご指摘ありがとうございます。変更しました。

m.ts10806

2021/03/09 06:04

全角スペースで別の問題が

souzitarou

2021/03/09 06:09

すみません修正しました

m.ts10806

2021/03/09 06:15

しかし、Ajaxで実行されるのにブラウザ上で、とは。どこで確認してますか？ doneなら分かります。 GETなのでクエリストリング込でURL直アクセスならわかります。 >console.logで確認したものを見る限り問題起きてないように見えますが。

souzitarou

2021/03/09 13:20

直接localhost/screen.phpにアクセスして確認しています。他にもエラー文がありましてそれらを追記したので見ていただきたいです。同じような感じでphpの変数に値が入っていないというエラーです

m.ts10806

2021/03/09 19:31

>直接localhost/screen.phpにアクセスして確認しています。 Ajaxはバックグラウンドで実行させるものなので、直接アクセスは必要ありません。一応GETなら localhost/screen.php?random_array=何か適当な値でブラウザ直実行で確認できなくもないですが。 done()に書いてあるconsole.log()で想定の値が返ってきてる時点で全く問題ないです。

souzitarou

2021/03/10 15:14

では「試したこと」に書いてあるように話題をブラウザに表示させたいのですがどうすればよいのでしょうか？

m.ts10806

2021/03/10 18:56

}).done(function(data){ で帰ってきたdataをお好きなところへどうぞ。 https://api.jquery.com/html/#html-htmlString

souzitarou

2021/03/11 21:44

ありがとうございます。

m.ts10806

2021/03/12 00:26

まだ解決してませんか？お礼はそれとしてもフィードバックをください。「アドバイスの結果どうなったか」のほうが回答者としては欲しいです。

souzitarou

2021/03/13 01:59

解決しました。ありがとうございました。

行動規範の内容に同意します

ベストアンサー

エラーの原因は、screen.phpをブラウザで表示してるから、と思われる。最初のブラウザアクセスもgetになるのでパラメーターがないですよね。

そのあとでajaxが動いてscreen.phpにgetする際にパラメーター指定してるので、その際のscreen.phpでは値が取得できる（var_dumpで表示される）。

という状況では。

ブラウザアクセス時のscreen.phpで値を表示したいのであれば、m.ts10806さんのアドバイスどおり。

投稿2021/03/11 01:30

hiok

総合スコア595

souzitarou

2021/03/11 21:49

回答ありがとうございます。 screen.phpにアクセスしてからajaxが動いてるという感でことしょうか？解決方法としてはscree.phpで値を表示させるようなコードに変えるか、screen.htmlを作ってそちらにajaxの値を返す方法か、で合っていますか？

hiok

2021/03/11 23:32

>screen.phpにアクセスしてからajaxが動いてるという感でことしょうか？そのとおりです。phpはサーバーで処理されます。その処理結果がpcに渡されてブラウザで表示されます。ajaxはそのブラウザで表示するタイミングで処理されます。 php、javascriptでプログラム作る時は、サーバーサイドで実行（処理）される内容と、その後のpc（ブラウザ）で実行（処理、レンダリング）される内容を区別して考えるとよいです。解決方法のどちらでもできるとは思います。個人的には、ブラウザで直接アクセスするファイルと、ajaxでアクセスするファイルは別にした方が作りやすいのでは、と思います。

souzitarou

2021/03/13 01:59

分かりました。助かりましたありがとうございます

行動規範の内容に同意します

あなたの回答