teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問FuelPHPを用いてajaxの使い方がわかりません。

編集履歴

質問編集履歴

6

発生しているエラーを追加しました。

2021/12/14 15:33

投稿

morfonica
morfonica

スコア33

test CHANGED
File without changes
test CHANGED
@@ -16,6 +16,12 @@
16
16
 
17
17
 
18
18
 
19
+ ### 発生しているエラー
20
+
21
+ ailed to load resource: the server responded with a status of 500 (Internal Server Error)
22
+
23
+
24
+
19
25
  ### 該当のソースコード
20
26
 
21
27
 

5

main.jsを修正しました。

2021/12/14 15:33

投稿

morfonica
morfonica

スコア33

test CHANGED
File without changes
test CHANGED
@@ -130,21 +130,19 @@
130
130
 
131
131
  window.onload = (function(){
132
132
 
133
-
134
-
135
- console.log('test');　//読み込み確認
133
+ console.log('test');
136
134
 
137
135
 
138
136
 
139
137
  $('#send').on('click', function(event){
140
138
 
141
- let id = $('#main').val();//値を代入
139
+ let content = $('#main').val();//chat.phpの値を代入
142
140
 
143
141
  $.ajax({
144
142
 
145
143
  type: 'POST', //HTTPリクエストのタイプ
146
144
 
147
- url: 'chat.php', // リクエストしたいURLを記載。送信先
145
+ url: 'ajax/create.json', // リクエストしたいURLを記載。送信先 chat.php?
148
146
 
149
147
  dataType: 'json', //受け取るデータの形
150
148
 
@@ -152,9 +150,7 @@
152
150
 
153
151
  //渡すデータをここに記述
154
152
 
155
- "id":id //利用しやすくするため
153
+ "content" : content //データ内でpostという名前で利用するため
156
-
157
- content : $('.js-get-val-content').val(),
158
154
 
159
155
  },
160
156
 
@@ -164,6 +160,8 @@
164
160
 
165
161
  //成功した時の処理
166
162
 
163
+ console.log('送信完了');
164
+
167
165
  $('#return').append('<p>' + data.content + '</p>');
168
166
 
169
167
  })
@@ -188,6 +186,8 @@
188
186
 
189
187
  });
190
188
 
189
+
190
+
191
191
  ```
192
192
 
193
193
 

4

views/chat.phpの余計な記述を削除しました。

2021/12/14 15:29

投稿

morfonica
morfonica

スコア33

test CHANGED
File without changes
test CHANGED
@@ -50,9 +50,9 @@
50
50
 
51
51
 
52
52
 
53
- <h1>フォーム送信ajax</h1>
53
+ <h1>フォーム送信</h1>
54
-
54
+
55
- <?php echo Form::open('ajax/post-regist') ?>
55
+ <?php echo Form::open('/chat/add') ?>
56
56
 
57
57
  <div class="js-get-val-content"><?php echo Form::textarea('content', Input::post('content')) ?><br></div>
58
58
 
@@ -64,15 +64,13 @@
64
64
 
65
65
 
66
66
 
67
+ <h1>ajax送信</h1>
68
+
67
- <div class='return'></div>
69
+ <div id='return'></div>
68
-
69
- <form>
70
+
70
-
71
- <textarea id='main' name='content'></textarea>
71
+ <textarea id='main' name='content'></textarea><br>
72
-
72
+
73
- <input type='submit' value='送信する' id='send'>
73
+ <button id='send'>送信</button>
74
-
75
- </form>
76
74
 
77
75
  ```
78
76
 

3

controllerを修正しました。

2021/12/14 15:27

投稿

morfonica
morfonica

スコア33

test CHANGED
File without changes
test CHANGED
@@ -90,19 +90,33 @@
90
90
 
91
91
  public function post_create(){ //関数 HTTPメソッド_処理名
92
92
 
93
- $content = $_POST['content'];
93
+ $content = $_POST['post']; //main.jsからs送信されたデータ
94
+
94
-
95
+ $user_id = Arr::get(Auth::get_user_id(),1);
96
+
97
+ // Auth::get_user_id() : ログイン中のユーザーIDを取得。
98
+
99
+ // 注意点がありこのメソッドの戻り値はドライバ名とユーザーIDの配列。
100
+
95
- $data = array('content' => $content);
101
+ $array = array("content" => $content, "user_id" => $user_id);
102
+
96
-
103
+ header("Content-type: application/json; charset=UTF-8");
104
+
105
+ // 指定しないと、text/html型で処理される
106
+
97
- //$dataに配列でデータを入れるとjson形式で返す
107
+ // JSONデータを処理することを指定
108
+
98
-
109
+ $json = json_encode($array); //jsonデータに変換
110
+
99
- return $this->response($data, 200);
111
+ return $this->response($json, 200);
112
+
113
+ // 応答データを送信
100
114
 
101
115
  //HTTPステータスコード２００：リクエストが正常に処理できた。
102
116
 
103
117
  }
104
118
 
105
-
119
+
106
120
 
107
121
  }
108
122
 

2

json形式で返すコントローラーを修正しました。

2021/12/14 15:25

投稿

morfonica
morfonica

スコア33

test CHANGED
File without changes
test CHANGED
@@ -78,7 +78,7 @@
78
78
 
79
79
  ```PHP
80
80
 
81
- controller/chat.controller
81
+ controller/ajax.controller
82
82
 
83
83
 
84
84
 
@@ -86,52 +86,30 @@
86
86
 
87
87
  class Controller_Ajax extends Controller_Rest{
88
88
 
89
+
90
+
89
- public function post_regist(){
91
+ public function post_create(){ //関数 HTTPメソッド_処理名
90
-
92
+
91
- $posts = model_post::find('all');
93
+ $content = $_POST['content'];
92
-
93
- $data = array();
94
+
94
-
95
- $i = 0;
96
-
97
- foreach($posts as $post) {
98
-
99
- $data[$i] = array();
100
-
101
- $data[$i]['content'] = $post['content'];
95
+ $data = array('content' => $content);
102
-
103
- $i = $i + 1;
96
+
104
-
105
- }
106
-
107
- if(\Input::is_ajax()){
108
-
109
- // 元から用意されているクラスを利用する場合、グローバル直下であるということを明示して全てのクラス名の前に「\」を付加
110
-
111
- echo json_encode($data);
112
-
113
- }else{
114
-
115
- return \View::forge('chat');
116
-
117
- }
118
-
119
-
120
-
121
-
122
-
123
- //データを返却する
97
+ //$dataに配列でデータを入れるとjson形式で返す
124
-
125
- $json = ['result' => true];
98
+
126
-
127
- return $this->response($json);
99
+ return $this->response($data, 200);
100
+
101
+ //HTTPステータスコード２００：リクエストが正常に処理できた。
128
102
 
129
103
  }
130
104
 
105
+
106
+
131
107
  }
132
108
 
133
109
  ```
134
110
 
111
+
112
+
135
113
  ```javascript
136
114
 
137
115
  js/main.js
@@ -200,6 +178,8 @@
200
178
 
201
179
  ```
202
180
 
181
+
182
+
203
183
  ```PHP
204
184
 
205
185
  config/routes.php
@@ -238,6 +218,8 @@
238
218
 
239
219
  ```
240
220
 
221
+
222
+
241
223
  ```PHP
242
224
 
243
225
  views/template.php

1

main.js 不要なコード削除

2021/12/14 07:30

投稿

morfonica
morfonica

スコア33

test CHANGED
File without changes
test CHANGED
@@ -140,72 +140,26 @@
140
140
 
141
141
  window.onload = (function(){
142
142
 
143
+
144
+
143
- console.log('test');
145
+ console.log('test');　//読み込み確認
144
-
146
+
147
+
148
+
145
- $('.js-regist').on('click', function(e){
149
+ $('#send').on('click', function(event){
146
-
150
+
147
- e.preventDefault();
151
+ let id = $('#main').val();//値を代入
148
-
149
-
150
152
 
151
153
  $.ajax({
152
154
 
153
- type: 'POST',
155
+ type: 'POST', //HTTPリクエストのタイプ
154
-
156
+
155
- url: location.origin + "/ajax/regist.json",
157
+ url: 'chat.php', // リクエストしたいURLを記載。送信先
156
-
157
- // コントローラー名/アクション名.json
158
+
158
-
159
- dataType: 'json',
159
+ dataType: 'json', //受け取るデータの形
160
160
 
161
161
  data: {
162
162
 
163
- // フォームの入力内容
164
-
165
- content : $('.js-get-val-content').val(),
166
-
167
- }
168
-
169
- }).done(function(data){
170
-
171
- // ajax成功
172
-
173
- $('.chat').append(data);
174
-
175
-
176
-
177
- }).fail(function(jqXHR, textStatus, errorThrown){
178
-
179
- // ajax失敗
180
-
181
- alert('読み込み失敗');
182
-
183
- console.log("XMLHttpRequest : " + XMLHttpRequest.status);
184
-
185
- console.log("textStatus : " + textStatus);
186
-
187
- console.log("errorThrown : " + errorThrown.message);
188
-
189
- });
190
-
191
- });
192
-
193
-
194
-
195
- $('#send').on('click', function(event){
196
-
197
- let id = $('#main').val();//値を代入
198
-
199
- $.ajax({
200
-
201
- type: 'POST', //HTTPリクエストのタイプ
202
-
203
- url: 'chat.php', // リクエストしたいURLを記載。送信先
204
-
205
- dataType: 'json', //受け取るデータの形
206
-
207
- data: {
208
-
209
163
  //渡すデータをここに記述
210
164
 
211
165
  "id":id //利用しやすくするため