質問編集履歴
3
正しいコードに変更。旧コードを下に追加。$.postの詳細を記入
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -6,12 +6,10 @@
|
|
|
6
6
|
### ソースコード
|
|
7
7
|
```js
|
|
8
8
|
$("#registration").on('click',function(){
|
|
9
|
-
var name = $('#name').val();
|
|
10
|
-
var url = $("#url").val();
|
|
11
9
|
$.post('_Ajax.php',{
|
|
12
10
|
dataType:'json',
|
|
13
|
-
name:name,
|
|
11
|
+
name:$('#name').val(),
|
|
14
|
-
url:url,
|
|
12
|
+
url:$("#url").val(),
|
|
15
13
|
mode:'reg'
|
|
16
14
|
}).done(function(res){
|
|
17
15
|
console.log("こんにちは！");
|
|
@@ -31,12 +29,9 @@
|
|
|
31
29
|
|
|
32
30
|
$ajax_processing = new DB();
|
|
33
31
|
|
|
34
|
-
//今回はmanagementクラスのインスタンスを作って、post()というメソッドを呼び出す処理を書いている
|
|
35
32
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|
36
33
|
try {
|
|
37
|
-
|
|
38
|
-
$res = $ajax_processing->post();
|
|
34
|
+
$res = $ajax_processing->post();
|
|
39
|
-
// jsonであることを知らせている
|
|
40
35
|
header('Content-Type: application/json');
|
|
41
36
|
echo json_encode($res);
|
|
42
37
|
exit;
|
|
@@ -117,7 +112,93 @@
|
|
|
117
112
|
その他必要な情報があれば随時追記していきます。ajaxの仕組みで理解できていない部分がいくつかあるため、今回のようなミスをしてしまったかもしれないです。もし、ここが理解できていないという部分がありましたら教えていただける人も募集いたします。
|
|
118
113
|
お時間を取らせてしまうようですが、よろしくお願いいたします。
|
|
119
114
|
|
|
115
|
+
|
|
120
|
-
※
|
|
116
|
+
※$.postの部分に入れるdataについて
|
|
121
|
-
現在、「name」と「url」というものがそれぞれあるが、これらをdataに入れた方がいいことは理解している。
|
|
117
|
+
現在、ajax処理を行うために$.postを用いている。そこに「name」と「url」というものがそれぞれあるが、これらをdataに入れた方がいいことは理解している。
|
|
122
118
|
しかし、dataにしてしまうとデータベースに反映されなくなってしまう。
|
|
123
|
-
なので、現状はこのような形にしているが、もしdataに入れる方法がわかるのであれば教えて欲しいです。
|
|
119
|
+
なので、現状はこのような形にしているが、もしdataに入れる方法がわかるのであれば教えて欲しいです。
|
|
120
|
+
コード
|
|
121
|
+
$.post('_Ajax.php,{
|
|
122
|
+
data:{
|
|
123
|
+
name:name,
|
|
124
|
+
url:url
|
|
125
|
+
},
|
|
126
|
+
mode:"reg",
|
|
127
|
+
})~
|
|
128
|
+
結果
|
|
129
|
+
undifined index:name (場所（PHP・Bの":name"=>$_POST['name'],）)
|
|
130
|
+
undifined index:name (場所（PHP・Bの）)
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
### 旧ソースコード（こちらは参考にしなくても結構です。）
|
|
135
|
+
```js
|
|
136
|
+
$("#registration").on('click',function(){
|
|
137
|
+
var name = $('#name').val();
|
|
138
|
+
var url = $("#url").val();
|
|
139
|
+
$.post('_Ajax.php',{
|
|
140
|
+
dataType:'json',
|
|
141
|
+
name:name,
|
|
142
|
+
url:url,
|
|
143
|
+
mode:'reg'
|
|
144
|
+
}).done(function(res){
|
|
145
|
+
console.log("こんにちは！");
|
|
146
|
+
}).fail(function(XMLHttpRequest, textStatus, errorThrown){
|
|
147
|
+
console.log('失敗');
|
|
148
|
+
console.log("XMLHttpRequest : " + XMLHttpRequest.status);
|
|
149
|
+
console.log("textStatus : " + textStatus);
|
|
150
|
+
console.log("errorThrown : " + errorThrown.message);
|
|
151
|
+
});
|
|
152
|
+
});
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
```PHP
|
|
156
|
+
//jsから渡ってきた値を処理するコード。今回はPHP・Aとする
|
|
157
|
+
<?php
|
|
158
|
+
require_once('management.php');
|
|
159
|
+
|
|
160
|
+
$ajax_processing = new DB();
|
|
161
|
+
|
|
162
|
+
//今回はmanagementクラスのインスタンスを作って、post()というメソッドを呼び出す処理を書いている
|
|
163
|
+
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|
164
|
+
try {
|
|
165
|
+
|
|
166
|
+
$res = $ajax_processing->post();//PHP・Bに飛ぶようにプログラミング
|
|
167
|
+
// jsonであることを知らせている
|
|
168
|
+
header('Content-Type: application/json');
|
|
169
|
+
echo json_encode($res);
|
|
170
|
+
exit;
|
|
171
|
+
} catch (Exception $e) {
|
|
172
|
+
header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Error', true, 500);
|
|
173
|
+
echo $e->getMessage();
|
|
174
|
+
exit;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
```PHP
|
|
180
|
+
//classについて記入しているコード。今回はPHP・Bとする
|
|
181
|
+
//一応POSTメソッドを記入。データベースの読み込み等は省略します。
|
|
182
|
+
<?php
|
|
183
|
+
class DB{
|
|
184
|
+
public function post(){
|
|
185
|
+
switch ($_POST['mode']){
|
|
186
|
+
case 'reg';
|
|
187
|
+
return $this->registration();
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
public function registration(){
|
|
193
|
+
$sql = "insert into deck_data(name,leader,type,url) values (:name,:leader,:type,:url)";
|
|
194
|
+
$stmt = $this->_db->prepare($sql);
|
|
195
|
+
$stmt->execute(array(
|
|
196
|
+
":name"=>$_POST['name'],
|
|
197
|
+
":url"=>$_POST['url']
|
|
198
|
+
));
|
|
199
|
+
|
|
200
|
+
return[
|
|
201
|
+
'id' => $this->_db->lastInsertId()
|
|
202
|
+
];
|
|
203
|
+
}
|
|
204
|
+
```
|
2
進展を書き込み、新しい問題点を書き込み。理解しやすいように改良もした。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
現在、ajaxを用いて、入力されたデータをデータベースに保存して、別の部分に反映させるというプログラミングを書いております。
|
|
1
|
-
|
|
2
|
+
プログラミングを書き進めて、実際にデータベースにデータを格納することはできました。しかし、その後、json形式にしてデータを反映させる処理ができません。お時間を取らせてしまい申し訳ありませんが、ここさえ解決すると一気に進めそうなので協力の方をお願いいたします。
|
|
2
3
|
|
|
3
|
-
ソースコードは下です。わかりやすいように簡易版でまとめ
|
|
4
|
+
ソースコードは下です。わかりやすいように簡易版でまとめます。
|
|
4
5
|
|
|
5
6
|
### ソースコード
|
|
6
7
|
```js
|
|
@@ -33,11 +34,8 @@
|
|
|
33
34
|
//今回はmanagementクラスのインスタンスを作って、post()というメソッドを呼び出す処理を書いている
|
|
34
35
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|
35
36
|
try {
|
|
36
|
-
|
|
37
|
+
|
|
37
|
-
// "name" => $_GET["name"],
|
|
38
|
-
// "url" => $_GET['url']
|
|
39
|
-
// );
|
|
40
|
-
$res = $ajax_processing->post();//
|
|
38
|
+
$res = $ajax_processing->post();//PHP・Bに飛ぶようにプログラミング
|
|
41
39
|
// jsonであることを知らせている
|
|
42
40
|
header('Content-Type: application/json');
|
|
43
41
|
echo json_encode($res);
|
|
@@ -82,60 +80,44 @@
|
|
|
82
80
|
ここの部分では、どのような流れで上記のコードになったのかを説明していきます。
|
|
83
81
|
|
|
84
82
|
１、原因解明
|
|
85
|
-
|
|
83
|
+
データベースにデータは入力されているので、
|
|
86
84
|
・ $res = $ajax_processing->post();
|
|
85
|
+
の部分まではうまく行っていると思った。その後の部分に問題があると思い、done(res)以降を「console.log("こんにちは！");」に変更。結果、「こんにちは」は返ってこなかった。fail処理を用意してみたら、failに書いた処理の方が反映された。
|
|
87
|
-
|
|
86
|
+
→やはりjson形式でうまく返せていないことを確認した。json書き方自体に問題があると分析した。
|
|
88
87
|
|
|
89
|
-
そもそもは以下のようなコードを書いていた。
|
|
90
|
-
```JavaScript
|
|
91
|
-
$("#registration").on('click',function(){
|
|
92
|
-
var name = $('#name').val();
|
|
93
|
-
var url = $("#url").val();
|
|
94
|
-
$.post('_Ajax.php',{
|
|
95
|
-
dataType:'text',
|
|
96
|
-
name:name,
|
|
97
|
-
url:url,
|
|
98
|
-
mode:'reg'
|
|
99
|
-
},function(res){
|
|
100
|
-
var $div = $('decklist_template').clone();
|
|
101
|
-
$div
|
|
102
|
-
.attr('id','deck_'+res.id)
|
|
103
|
-
.find('.deckName').text(name)
|
|
104
|
-
$("#deck_list").append($div);
|
|
105
|
-
$('#name').val('');
|
|
106
|
-
$('#url').val('');
|
|
107
|
-
})
|
|
108
|
-
```
|
|
109
|
-
しかし検証結果から、そもそも「function(res)」以降の処理を行っていないのではないかと推測し、「var $div = ~」の部分を「console.log("こんにちは！");」のみに変更。結果、返ってこなかった。なので、JavaScriptにjson形式でうまく返すことができていないのではないかと推測、fail処理を用意した。
|
|
110
|
-
→やはりjson形式でうまく返せていないことを把握。json書き方自体に問題があると分析した。
|
|
111
|
-
|
|
112
88
|
2、値を代入してみる
|
|
113
89
|
そもそもjson形式にする値がないのではないかと仮定した。なので、以下のコードを「$res = $ajax_processing->post();」の上に入れてみた。
|
|
114
|
-
```PHP
|
|
115
90
|
$data = array(
|
|
116
91
|
"name" => $_GET["name"],
|
|
117
92
|
"url" => $_GET['url']
|
|
118
93
|
);
|
|
119
|
-
```
|
|
120
|
-
結果はターミナルで立てたビルドインサーバーの方に「PHP Notice: Undefined index: name in
|
|
94
|
+
結果はターミナルで立てたビルドインサーバーの方に「PHP Notice: Undefined index: name in （データの場所）」というエラーメッセージが出てきた。
|
|
121
95
|
→どうしてnameが定義されていないのか理解できなくなり、余計混乱してくる。
|
|
96
|
+
※これは「_GET」を「_POST」に変更するだけで大丈夫でした。
|
|
122
97
|
|
|
123
|
-
3、エラーの検証
|
|
98
|
+
3、エラーの検証（未解決）
|
|
124
|
-
そもそもエラーが何かを知りたくなったので、エラーを検出するコードをネットから
|
|
99
|
+
そもそもエラーが何かを知りたくなったので、エラーを検出するコードをネットから拾って、入力。結果は下になった
|
|
125
|
-
一度値を代入して、結果を返してもらうと以下のエラー文が出た
|
|
126
100
|
・ textStatus : parsererror
|
|
127
101
|
・ errorThrown : Unexpected token < in JSON at position 2
|
|
128
|
-
|
|
102
|
+
どうやらjsonの中にHTMLの形で入ってしまっている？JSONの値の中に「<」というものがあって、それが混乱を招いているということがわかった。
|
|
129
103
|
→しかし、json形式で返しているし、どのようにすると「<」取り除かれるのかわからない。どこを改善すればいいのかがわからなくてお手上げ状態。
|
|
130
104
|
|
|
131
|
-
|
|
105
|
+
４、あるサイトを参考（未解決）
|
|
106
|
+
「[ajaxではまった話](https://qiita.com/qwq00/items/b95edb10156a64fa347f)」こちらのサイトを参考に
|
|
107
|
+
echo $res->request->is(['ajax']); …①
|
|
108
|
+
を、$this=$ajax_processingの部分に入れてみた。結果、「こんにちは」とは表示された。しかし、「console.log('こんにちは')」の下に「console.log(data)」を入れてみると、「Using $this when not in object context」というエラーが出てしまう。①が結局何かもわからない
|
|
132
109
|
|
|
133
110
|
### 主にわからないこと
|
|
134
|
-
・そもそもjsで最初に定義した値（「name」や「mode」など)はPHP・Aではどのように使われて、どのようにjson形式で返せばいいのかが理解できない
|
|
111
|
+
・そもそもjsで最初に定義した値（「name」や「mode」など)はPHP・Aではどのように使われて、どのようにjson形式で返せばいいのかが理解できない（未解決）
|
|
135
|
-
・$resとは何をしているものなのか。そしてjson形式で返ってきた後のdoneで使われているresは同じものなのか、それとも違うものなのか？
|
|
112
|
+
・$resとは何をしているものなのか。そしてjson形式で返ってきた後のdoneで使われているresは同じものなのか、それとも違うものなのか？（解決！今は考えなくて良い）
|
|
136
|
-
・json形式から返ってきた際のfunctionの引数が人によって「data」だったりするが、ここに入れる引数はどのようなものなのか？
|
|
113
|
+
・json形式から返ってきた際のfunctionの引数が人によって「data」だったりするが、ここに入れる引数はどのようなものなのか？（上に同じ）
|
|
137
|
-
・
|
|
114
|
+
・現状どのような問題があってdoneに行けないのか
|
|
138
115
|
|
|
139
116
|
|
|
140
|
-
その他必要な情報があれば随時追記していきます。ajaxの仕組みで理解できていない部分がいくつかあるため、今回のようなミスをしてしまったかもしれないです。もし、ここが理解できていないという部分がありましたら教えて
|
|
117
|
+
その他必要な情報があれば随時追記していきます。ajaxの仕組みで理解できていない部分がいくつかあるため、今回のようなミスをしてしまったかもしれないです。もし、ここが理解できていないという部分がありましたら教えていただける人も募集いたします。
|
|
141
|
-
お時間を取らせてしまうようですが、よろしくお願いいたします。
|
|
118
|
+
お時間を取らせてしまうようですが、よろしくお願いいたします。
|
|
119
|
+
|
|
120
|
+
※POSTの部分に入れるdataについて
|
|
121
|
+
現在、「name」と「url」というものがそれぞれあるが、これらをdataに入れた方がいいことは理解している。
|
|
122
|
+
しかし、dataにしてしまうとデータベースに反映されなくなってしまう。
|
|
123
|
+
なので、現状はこのような形にしているが、もしdataに入れる方法がわかるのであれば教えて欲しいです。
|
1
より簡潔に、わかりやすいように修正。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -8,10 +8,8 @@
|
|
|
8
8
|
var name = $('#name').val();
|
|
9
9
|
var url = $("#url").val();
|
|
10
10
|
$.post('_Ajax.php',{
|
|
11
|
-
dataType:'
|
|
11
|
+
dataType:'json',
|
|
12
12
|
name:name,
|
|
13
|
-
leader:leader,
|
|
14
|
-
type:type,
|
|
15
13
|
url:url,
|
|
16
14
|
mode:'reg'
|
|
17
15
|
}).done(function(res){
|
|
@@ -70,8 +68,6 @@
|
|
|
70
68
|
$stmt = $this->_db->prepare($sql);
|
|
71
69
|
$stmt->execute(array(
|
|
72
70
|
":name"=>$_POST['name'],
|
|
73
|
-
":leader"=>$_POST['leader'],
|
|
74
|
-
":type"=>$_POST['type'],
|
|
75
71
|
":url"=>$_POST['url']
|
|
76
72
|
));
|
|
77
73
|
|
|
@@ -82,6 +78,9 @@
|
|
|
82
78
|
```
|
|
83
79
|
|
|
84
80
|
### 自分で行ったこと
|
|
81
|
+
|
|
82
|
+
ここの部分では、どのような流れで上記のコードになったのかを説明していきます。
|
|
83
|
+
|
|
85
84
|
１、原因解明
|
|
86
85
|
まず、データベースに反映されているということは、別のPHPで行っているデータベース代入のプログラミングはうまく処理されている。そこから、
|
|
87
86
|
・ $res = $ajax_processing->post();
|
|
@@ -91,8 +90,6 @@
|
|
|
91
90
|
```JavaScript
|
|
92
91
|
$("#registration").on('click',function(){
|
|
93
92
|
var name = $('#name').val();
|
|
94
|
-
var leader = $('#reader').val();
|
|
95
|
-
var type = $('#deck_type').val();
|
|
96
93
|
var url = $("#url").val();
|
|
97
94
|
$.post('_Ajax.php',{
|
|
98
95
|
dataType:'text',
|
|
@@ -113,7 +110,7 @@
|
|
|
113
110
|
→やはりjson形式でうまく返せていないことを把握。json書き方自体に問題があると分析した。
|
|
114
111
|
|
|
115
112
|
2、値を代入してみる
|
|
116
|
-
そもそもjson形式にする値がないのではないかと
|
|
113
|
+
そもそもjson形式にする値がないのではないかと仮定した。なので、以下のコードを「$res = $ajax_processing->post();」の上に入れてみた。
|
|
117
114
|
```PHP
|
|
118
115
|
$data = array(
|
|
119
116
|
"name" => $_GET["name"],
|
|
@@ -121,15 +118,18 @@
|
|
|
121
118
|
);
|
|
122
119
|
```
|
|
123
120
|
結果はターミナルで立てたビルドインサーバーの方に「PHP Notice: Undefined index: name in /home/vagrant/ライバルズの旅/_Ajax.php on line 14」というエラーメッセージが出てきた。
|
|
121
|
+
→どうしてnameが定義されていないのか理解できなくなり、余計混乱してくる。
|
|
124
122
|
|
|
125
123
|
3、エラーの検証
|
|
126
124
|
そもそもエラーが何かを知りたくなったので、エラーを検出するコードをネットから探すことにした。その結果、failメソッドの中に入っているコード。
|
|
127
125
|
一度値を代入して、結果を返してもらうと以下のエラー文が出た
|
|
128
126
|
・ textStatus : parsererror
|
|
129
127
|
・ errorThrown : Unexpected token < in JSON at position 2
|
|
130
|
-
ネットで調べてみると、どうやらjsonの中にHTMLの形で入ってしまっている？JSONの値の中に「<」というものがあって、それが混乱を招いている
|
|
128
|
+
ネットで調べてみると、どうやらjsonの中にHTMLの形で入ってしまっている？JSONの値の中に「<」というものがあって、それが混乱を招いているということがわかった。
|
|
131
|
-
しかし、json形式で返しているし、どのようにすると「<」取り除かれるのかわからない。どこを改善すればいいのかがわからなくてお手上げ状態。
|
|
129
|
+
→しかし、json形式で返しているし、どのようにすると「<」取り除かれるのかわからない。どこを改善すればいいのかがわからなくてお手上げ状態。
|
|
132
130
|
|
|
131
|
+
以上の仮定で上記プログラムになった。
|
|
132
|
+
|
|
133
133
|
### 主にわからないこと
|
|
134
134
|
・そもそもjsで最初に定義した値（「name」や「mode」など)はPHP・Aではどのように使われて、どのようにjson形式で返せばいいのかが理解できない。
|
|
135
135
|
・$resとは何をしているものなのか。そしてjson形式で返ってきた後のdoneで使われているresは同じものなのか、それとも違うものなのか？
|