dbのテーブル全てをajaxでhtmlファイルに返したい

kazumad

総合スコア9

0グッド

0クリップ

投稿2021/04/28 14:45

編集2021/04/29 09:06

現在自作apiでdbから取ってきたテーブル全てをajax(json)でhtmlに返す機能を作っていますが
foeachで全件取ってきた後echo json_encode($row_1->fetch_assoc());でhtmlに返すことができません。
試したことはスコープを使って値を全件外に出そうとして失敗　foreachの代わりにwhileを使ったみたが失敗
しました。
お力を貸して頂きたいです。よろしくお願いします。

php
1$sql = "SELECT * FROM `user`";
2
3$result = $mysqli->query($sql);
4
5foreach ($result as $row) {
6    $row_1 = $row;
7}
8
9header("Content-type: application/json; charset=UTF-8");
10//JSONデータを出力
11echo json_encode($row_1->fetch_assoc());

受け取り側のファイルを追記します

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
6    <title>チャット</title>
7</head>
8
9<body>
10<h1>チャット</h1>
11<p id="user">現在入室しているユーザー　一覧</p>
12<!--この下にユーザー名を追加していく-->
13<ul id="list">
14<!--    liをここに追加-->
15</ul>
16  <p>名前</p>
17<div><input id="name" type="text" name=""></div>
18<p>メッセージ</p>
19<div><textarea id="chat_submit" type="text" name=""></textarea></div>
20
21<button type="button" id="test_btn">test</button>
22<script>
23    $(function() {
24        //insert API
25        //入室したらランダムな名前を割り振り情報(name,id)がdbに追加される
26        //まずランダム名を割り振るコード
27        let random_name = Math.random().toString(32).substring(2) ;
28        console.log(random_name);
29        let  name_data = {'random_name':random_name};
30        console.log(name_data);
31
32
33        //let tuika = random_name;
34        //変数　連結
35        //$test = "<p>{$hensu}</p>";
36        // $test = '<p>' . $hensu . '</p>';
37        //let test = `<p>${hensu}</p>`;
38        // let test = '<p>' + hensu + '</p>';
39        //$("#user").append(`<p>${tuika}</p>`);
40
41
42        //dbにランダム名を送る
43        $.ajax({
44            url:'http://localhost:8888/api_user.php',
45            type: "post",
46            //data	送信するデータ（「キー名: 値」のハッシュ形式）
47            dataType:'json',
48            data:name_data,
49            async: true
50        })
51            .done(function (data) {
52                if(data){
53                    console.log(data);
54                    console.log('ユーザー成功');
55                }
56                // 通信成功時の処理を記述
57                console.log(data);
58            })
59            .fail(function () {
60                // 通信失敗時の処理を記述
61                //console.log('');
62            });
63        //room_member API
64        setInterval(function () {
65            $.ajax({
66                url: 'http://localhost:8888/room_member.php',
67                type: "get",
68                dataType:'json',
69                //data	送信するデータ（「キー名: 値」のハッシュ形式）
70                async: true
71            })
72                .done(function (data) {
73                    // 通信成功時の処理を記述
74                    console.log(data);
75                    console.log('一覧成功');
76
77                    //$("ul").append(`<li>${data.name}</li>`);
78
79                    $('ul').html('');
80
81                    $.each(data, function(index, element) {
82                        $('ul').append(index + ':' + element.name + '<br>');
83                    });
84                    //人数分回す
85                    // $('#list').each(function() {
86                    //     //繰り返し処理を記述する
87                    //     $("#list").append(`<li>${data.name}</li>`);
88                    //  })
89                })
90                .fail(function () {
91                    // 通信失敗時の処理を記述
92                    console.log('失敗');
93                });
94        }, 5000);
95        //delete API
96        //ウインドウ閉じたらユーザ削除
97        $(window).on('beforeunload', function() {
98            $.ajax({
99                url:'http://localhost:8888/api_delete.php',
100                type: "post",
101                //data	送信するデータ（「キー名: 値」のハッシュ形式）
102                dataType:"json",
103                data:name_data,
104                async: true
105            })
106            .done(function (data) {
107                if(data){
108                    console.log(data);
109                    console.log('ユーザー成功');
110                }
111                // 通信成功時の処理を記述
112                console.log(data);
113            })
114            .fail(function () {
115                // 通信失敗時の処理を記述
116                //console.log('');
117            });
118        });
119
120
121        //select API
122        //submitイベントを使い、フォーム（js-from）が送信された時に処理が実行されるようにイベントを設定。
123        $('#test_btn').on('click', function(){
124            let name = $('#name').val();
125            let chat_submit = $('#chat_submit').val();
126            console.log(name);
127            console.log(chat_submit);
128            let data = { 'name':name,
129                'chat_submit':chat_submit
130            };
131            console.log(data);
132            $.ajax({
133                url:'http://localhost:8888/api.php',
134                type: "get",
135                dataType:'json',
136                //data	送信するデータ（「キー名: 値」のハッシュ形式）
137                data:data,
138                async: true
139            })
140            .done(function (data) {
141                if(data){
142                    console.log('成功');
143
144                }
145                // 通信成功時の処理を記述
146                console.log(data);
147            })
148            .fail(function () {
149                // 通信失敗時の処理を記述
150                //console.log('');
151            });
152        });
153    });
154</script>
155</body>
156</html>
157

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

回答1件

ベストアンサー

幾つか誤解された使い方されてると思いますが、

dbから取ってきたテーブル全てを

SELECT * FROM userで取得されるのは「テーブル」ではなく「レコード」です。
「テーブル」はuser。MySQLでテーブル全て取りたい場合はshow tablesを実行します。

htmlに返すことができません。

Ajaxで返されるのは「呼び出し元」なので、HTMLに限りません。
大抵はJavaScriptなりURLリクエストを送信できるサーバーサイドの言語が「呼び出し元」になります。

コード部分で明らかな箇所。
$row_1 = $row;
上記は「代入」ですから、常に上書きし続けていることになります。

またmysqli::queryが返すのはmysqli_resultなので、そのものをループすることってあまりないと思います。

よく見るのはwhile ($row = $result->fetch_assoc()) {ですね。

デバッガを入れるなり、ログファイルに書き出すなりでデバッグできる仕組みは入れておいた方が良いです。バックグラウンドで実行されるため画面に出力されませんから（JSONに限っている場合、JSON形式不正のエラーは出ることはあるが）

どのような結果を求めていて何が起きているのか分かりませんが、
「SELECTした情報をJSONにして返したい」のでしたら下記で良いのでは。

php
1header("Content-type: application/json; charset=UTF-8");
2$result = $mysqli->query("SELECT * FROM `user`");
3echo json_encode($result->fetch_all(MYSQLI_ASSOC));
4

mysqli_result::fetch_all

可能ならエラーハンドリングもしたいところですね。

php
1
2header("Content-type: application/json; charset=UTF-8");
3
4try {
5	$result = $mysqli->query("SELECT * FROM `user`");
6	echo json_encode($result->fetch_all(MYSQLI_ASSOC));
7} catch (mysqli_sql_exception $e) {
8	echo 'mysqli_sql_exception'.$e->getMessage();
9	exit;
10}
11