質問編集履歴

2

受け取り側ファイルを修正

2021/04/29 09:06

投稿

kazumad
kazumad

スコア9

test CHANGED
File without changes
test CHANGED
@@ -58,25 +58,23 @@
58
58
 
59
59
  <body>
60
60
 
61
- <h1>チャット参加メンバー、一覧機能のテスト</h1>
62
-
63
- <ul>
64
-
65
- <li></li>
61
+ <h1>チャット</h1>
62
+
66
-
63
+ <p id="user">現在入室しているユーザー 一覧</p>
64
+
65
+ <!--この下にユーザー名を追加していく-->
66
+
67
- <li></li>
67
+ <ul id="list">
68
-
68
+
69
- <li></li>
69
+ <!-- liをここに追加-->
70
70
 
71
71
  </ul>
72
72
 
73
-
74
-
75
- 名前
73
+ <p>名前</p>
76
74
 
77
75
  <div><input id="name" type="text" name=""></div>
78
76
 
79
- メッセージ
77
+ <p>メッセージ</p>
80
78
 
81
79
  <div><textarea id="chat_submit" type="text" name=""></textarea></div>
82
80
 
@@ -86,39 +84,249 @@
86
84
 
87
85
  <script>
88
86
 
89
- //
90
-
91
87
  $(function() {
92
88
 
89
+ //insert API
90
+
91
+ //入室したらランダムな名前を割り振り情報(name,id)がdbに追加される
92
+
93
+ //まずランダム名を割り振るコード
94
+
95
+ let random_name = Math.random().toString(32).substring(2) ;
96
+
97
+ console.log(random_name);
98
+
99
+ let name_data = {'random_name':random_name};
100
+
101
+ console.log(name_data);
102
+
103
+
104
+
105
+
106
+
107
+ //let tuika = random_name;
108
+
109
+ //変数 連結
110
+
111
+ //$test = "<p>{$hensu}</p>";
112
+
113
+ // $test = '<p>' . $hensu . '</p>';
114
+
115
+ //let test = `<p>${hensu}</p>`;
116
+
117
+ // let test = '<p>' + hensu + '</p>';
118
+
119
+ //$("#user").append(`<p>${tuika}</p>`);
120
+
121
+
122
+
123
+
124
+
125
+ //dbにランダム名を送る
126
+
127
+ $.ajax({
128
+
129
+ url:'http://localhost:8888/api_user.php',
130
+
131
+ type: "post",
132
+
133
+ //data 送信するデータ(「キー名: 値」のハッシュ形式)
134
+
135
+ dataType:'json',
136
+
137
+ data:name_data,
138
+
139
+ async: true
140
+
141
+ })
142
+
143
+ .done(function (data) {
144
+
145
+ if(data){
146
+
147
+ console.log(data);
148
+
149
+ console.log('ユーザー成功');
150
+
151
+ }
152
+
153
+ // 通信成功時の処理を記述
154
+
155
+ console.log(data);
156
+
157
+ })
158
+
159
+ .fail(function () {
160
+
161
+ // 通信失敗時の処理を記述
162
+
163
+ //console.log('');
164
+
165
+ });
166
+
167
+ //room_member API
168
+
169
+ setInterval(function () {
170
+
171
+ $.ajax({
172
+
173
+ url: 'http://localhost:8888/room_member.php',
174
+
175
+ type: "get",
176
+
177
+ dataType:'json',
178
+
179
+ //data 送信するデータ(「キー名: 値」のハッシュ形式)
180
+
181
+ async: true
182
+
183
+ })
184
+
185
+ .done(function (data) {
186
+
187
+ // 通信成功時の処理を記述
188
+
189
+ console.log(data);
190
+
191
+ console.log('一覧成功');
192
+
193
+
194
+
195
+ //$("ul").append(`<li>${data.name}</li>`);
196
+
197
+
198
+
199
+ $('ul').html('');
200
+
201
+
202
+
203
+ $.each(data, function(index, element) {
204
+
205
+ $('ul').append(index + ':' + element.name + '<br>');
206
+
207
+ });
208
+
209
+ //人数分回す
210
+
211
+ // $('#list').each(function() {
212
+
213
+ // //繰り返し処理を記述する
214
+
215
+ // $("#list").append(`<li>${data.name}</li>`);
216
+
217
+ // })
218
+
219
+ })
220
+
221
+ .fail(function () {
222
+
223
+ // 通信失敗時の処理を記述
224
+
225
+ console.log('失敗');
226
+
227
+ });
228
+
229
+ }, 5000);
230
+
231
+ //delete API
232
+
233
+ //ウインドウ閉じたらユーザ削除
234
+
235
+ $(window).on('beforeunload', function() {
236
+
237
+ $.ajax({
238
+
239
+ url:'http://localhost:8888/api_delete.php',
240
+
241
+ type: "post",
242
+
243
+ //data 送信するデータ(「キー名: 値」のハッシュ形式)
244
+
245
+ dataType:"json",
246
+
247
+ data:name_data,
248
+
249
+ async: true
250
+
251
+ })
252
+
253
+ .done(function (data) {
254
+
255
+ if(data){
256
+
257
+ console.log(data);
258
+
259
+ console.log('ユーザー成功');
260
+
261
+ }
262
+
263
+ // 通信成功時の処理を記述
264
+
265
+ console.log(data);
266
+
267
+ })
268
+
269
+ .fail(function () {
270
+
271
+ // 通信失敗時の処理を記述
272
+
273
+ //console.log('');
274
+
275
+ });
276
+
277
+ });
278
+
279
+
280
+
281
+
282
+
93
283
  //select API
94
284
 
285
+ //submitイベントを使い、フォーム(js-from)が送信された時に処理が実行されるようにイベントを設定。
286
+
287
+ $('#test_btn').on('click', function(){
288
+
289
+ let name = $('#name').val();
290
+
291
+ let chat_submit = $('#chat_submit').val();
292
+
293
+ console.log(name);
294
+
295
+ console.log(chat_submit);
296
+
297
+ let data = { 'name':name,
298
+
299
+ 'chat_submit':chat_submit
300
+
301
+ };
302
+
303
+ console.log(data);
304
+
95
- $.ajax({
305
+ $.ajax({
96
-
306
+
97
- url:'http://localhost:8888/api.php',
307
+ url:'http://localhost:8888/api.php',
98
-
308
+
99
- type: "post",
309
+ type: "get",
310
+
100
-
311
+ dataType:'json',
312
+
101
- //data 送信するデータ(「キー名: 値」のハッシュ形式)
313
+ //data 送信するデータ(「キー名: 値」のハッシュ形式)
102
-
314
+
103
- dataType:'json',
315
+ data:data,
104
-
316
+
105
- async: true
317
+ async: true
106
-
318
+
107
- })
319
+ })
108
-
109
-
110
-
111
-
112
320
 
113
321
  .done(function (data) {
114
322
 
115
-
116
-
117
- console.log(data);
323
+ if(data){
118
-
324
+
119
- console.log('ユーザー成功');
325
+ console.log('成功');
326
+
327
+
328
+
120
-
329
+ }
121
-
122
330
 
123
331
  // 通信成功時の処理を記述
124
332
 
@@ -130,11 +338,11 @@
130
338
 
131
339
  // 通信失敗時の処理を記述
132
340
 
133
- console.log('失敗');
341
+ //console.log('');
134
342
 
135
343
  });
136
344
 
137
-
345
+ });
138
346
 
139
347
  });
140
348
 
@@ -144,4 +352,6 @@
144
352
 
145
353
  </html>
146
354
 
355
+
356
+
147
357
  ```

1

受け取り側のファイルhtmlファイル  中身(html タグ jquery) を追記しました

2021/04/29 09:06

投稿

kazumad
kazumad

スコア9

test CHANGED
File without changes
test CHANGED
@@ -35,3 +35,113 @@
35
35
  echo json_encode($row_1->fetch_assoc());
36
36
 
37
37
  ```
38
+
39
+ 受け取り側のファイルを追記します
40
+
41
+ ```html
42
+
43
+ <!DOCTYPE html>
44
+
45
+ <html lang="ja">
46
+
47
+ <head>
48
+
49
+ <meta charset="utf-8">
50
+
51
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
52
+
53
+ <title>チャット</title>
54
+
55
+ </head>
56
+
57
+
58
+
59
+ <body>
60
+
61
+ <h1>チャット参加メンバー、一覧機能のテスト</h1>
62
+
63
+ <ul>
64
+
65
+ <li></li>
66
+
67
+ <li></li>
68
+
69
+ <li></li>
70
+
71
+ </ul>
72
+
73
+
74
+
75
+ 名前
76
+
77
+ <div><input id="name" type="text" name=""></div>
78
+
79
+ メッセージ
80
+
81
+ <div><textarea id="chat_submit" type="text" name=""></textarea></div>
82
+
83
+
84
+
85
+ <button type="button" id="test_btn">test</button>
86
+
87
+ <script>
88
+
89
+ //
90
+
91
+ $(function() {
92
+
93
+ //select API
94
+
95
+ $.ajax({
96
+
97
+ url:'http://localhost:8888/api.php',
98
+
99
+ type: "post",
100
+
101
+ //data 送信するデータ(「キー名: 値」のハッシュ形式)
102
+
103
+ dataType:'json',
104
+
105
+ async: true
106
+
107
+ })
108
+
109
+
110
+
111
+
112
+
113
+ .done(function (data) {
114
+
115
+
116
+
117
+ console.log(data);
118
+
119
+ console.log('ユーザー成功');
120
+
121
+
122
+
123
+ // 通信成功時の処理を記述
124
+
125
+ console.log(data);
126
+
127
+ })
128
+
129
+ .fail(function () {
130
+
131
+ // 通信失敗時の処理を記述
132
+
133
+ console.log('失敗');
134
+
135
+ });
136
+
137
+
138
+
139
+ });
140
+
141
+ </script>
142
+
143
+ </body>
144
+
145
+ </html>
146
+
147
+ ```