teratail
回答率
85.47%
質問するログイン新規登録
トップPHPに関する質問jQueryのajax値渡し先について

編集履歴

回答編集履歴

3

修正

2019/03/03 06:18

投稿

IShix
IShix

スコア1724

test CHANGED
@@ -186,80 +186,62 @@
186
186
 
187
187
  ```PHP
188
188
 
189
- <!DOCTYPE html>
190
-
191
- <html lang="ja" dir="ltr">
192
-
193
- <head>
194
-
195
- <meta charset="utf-8">
196
-
197
- <title>TEST</title>
198
-
199
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
200
-
201
- </head>
202
-
203
- <body>
204
-
205
-
206
-
207
- <p id="test">jQuery練習</p>
208
-
209
- <input type="text" id="name" value="">
210
-
211
- <input type="button" id="testBtn" value="ボタン">
212
-
213
-
214
-
215
- <p id="result"></p>
216
-
217
-
218
-
219
- <script type="text/javascript">
220
-
221
-
222
-
223
- $(function()
224
-
225
- {
226
-
227
- var btn = $("#testBtn"),
228
-
229
- result = $("#result");
230
-
231
-
232
-
233
- btn.click(function()
234
-
235
- {
236
-
237
- $.ajax({
238
-
239
- url:'getData.php',
240
-
241
- type:'POST',
242
-
243
- data:{id:"3"}
244
-
245
- }).done(function(data)
246
-
247
- {
248
-
249
- result.text("User : " + data.name + " (" + data.old + ")");
250
-
251
- });
252
-
253
- });
254
-
255
- });
256
-
257
-
258
-
259
- </script>
260
-
261
- </body>
262
-
263
- </html>
189
+ <?
190
+
191
+
192
+
193
+ // エラーを画面に出さない ※テスト時はコメントアウトしてください
194
+
195
+ ini_set("display_errors", 0);
196
+
197
+ ini_set("display_startup_errors", 0);
198
+
199
+
200
+
201
+ //値がセットされていなければ終了
202
+
203
+ if(!isset($_POST['id']))
204
+
205
+ {
206
+
207
+ exit;
208
+
209
+ }
210
+
211
+
212
+
213
+ $id = (int)$_POST['id'];
214
+
215
+ //IDの値が0なら終了
216
+
217
+ if($id <= 0)
218
+
219
+ {
220
+
221
+ exit;
222
+
223
+ }
224
+
225
+
226
+
227
+ //例としてIDが3ならIDに紐づいたデータを返す
228
+
229
+ if($id == 3)
230
+
231
+ {
232
+
233
+ $user = [];
234
+
235
+ $user['name'] = 'てすとくん';
236
+
237
+ $user['old'] = 25;
238
+
239
+
240
+
241
+ header("Content-Type: application/json; charset=utf-8");
242
+
243
+ echo json_encode($user, JSON_UNESCAPED_UNICODE);
244
+
245
+ }
264
246
 
265
247
  ```

2

追記

2019/03/03 06:18

投稿

IShix
IShix

スコア1724

test CHANGED
@@ -83,3 +83,183 @@
83
83
 
84
84
 
85
85
  ユーザーの入力を扱うには**文字のエスケープ**も合わせて勉強するのをおすすめします。
86
+
87
+
88
+
89
+
90
+
91
+ ### [追記] 別ファイルにAjaxで値を渡すサンプル
92
+
93
+ 別ファイルにAjaxでidを渡して、その結果を表示するサンプルを書きました。
94
+
95
+ 練習であればこれで良いと思いますがセキュリティーが不十分です。
96
+
97
+ セキュリティーについてしっかり学ぶと良いと思います。
98
+
99
+
100
+
101
+ test.html
102
+
103
+ ```HTML
104
+
105
+ <!DOCTYPE html>
106
+
107
+ <html lang="ja" dir="ltr">
108
+
109
+ <head>
110
+
111
+ <meta charset="utf-8">
112
+
113
+ <title>TEST</title>
114
+
115
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
116
+
117
+ </head>
118
+
119
+ <body>
120
+
121
+
122
+
123
+ <p id="test">jQuery練習</p>
124
+
125
+ <input type="text" id="name" value="">
126
+
127
+ <input type="button" id="testBtn" value="ボタン">
128
+
129
+
130
+
131
+ <p id="result"></p>
132
+
133
+
134
+
135
+ <script type="text/javascript">
136
+
137
+
138
+
139
+ $(function()
140
+
141
+ {
142
+
143
+ var btn = $("#testBtn"),
144
+
145
+ result = $("#result");
146
+
147
+
148
+
149
+ btn.click(function()
150
+
151
+ {
152
+
153
+ $.ajax({
154
+
155
+ url:'getData.php',
156
+
157
+ type:'POST',
158
+
159
+ data:{id:"3"}
160
+
161
+ }).done(function(data)
162
+
163
+ {
164
+
165
+ result.text("User : " + data.name + " (" + data.old + ")");
166
+
167
+ });
168
+
169
+ });
170
+
171
+ });
172
+
173
+
174
+
175
+ </script>
176
+
177
+ </body>
178
+
179
+ </html>
180
+
181
+ ```
182
+
183
+
184
+
185
+ getData.php
186
+
187
+ ```PHP
188
+
189
+ <!DOCTYPE html>
190
+
191
+ <html lang="ja" dir="ltr">
192
+
193
+ <head>
194
+
195
+ <meta charset="utf-8">
196
+
197
+ <title>TEST</title>
198
+
199
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
200
+
201
+ </head>
202
+
203
+ <body>
204
+
205
+
206
+
207
+ <p id="test">jQuery練習</p>
208
+
209
+ <input type="text" id="name" value="">
210
+
211
+ <input type="button" id="testBtn" value="ボタン">
212
+
213
+
214
+
215
+ <p id="result"></p>
216
+
217
+
218
+
219
+ <script type="text/javascript">
220
+
221
+
222
+
223
+ $(function()
224
+
225
+ {
226
+
227
+ var btn = $("#testBtn"),
228
+
229
+ result = $("#result");
230
+
231
+
232
+
233
+ btn.click(function()
234
+
235
+ {
236
+
237
+ $.ajax({
238
+
239
+ url:'getData.php',
240
+
241
+ type:'POST',
242
+
243
+ data:{id:"3"}
244
+
245
+ }).done(function(data)
246
+
247
+ {
248
+
249
+ result.text("User : " + data.name + " (" + data.old + ")");
250
+
251
+ });
252
+
253
+ });
254
+
255
+ });
256
+
257
+
258
+
259
+ </script>
260
+
261
+ </body>
262
+
263
+ </html>
264
+
265
+ ```

1

修正

2019/03/03 06:17

投稿

IShix
IShix

スコア1724

test CHANGED
@@ -2,9 +2,7 @@
2
2
 
3
3
  というか送ることがありませんので別ファイルに送るようにしてください。
4
4
 
5
- 入力した文字を表示させるだけならjQueryのみでやるといいです。
5
+ 入力した文字を表示させるだけならjQueryのみでできます。
6
-
7
-
8
6
 
9
7
 
10
8
 
@@ -78,7 +76,7 @@
78
76
 
79
77
 
80
78
 
81
- ### [おまけ]上記コードには問題があります。
79
+ ### [おまけ] 上記コードには問題があります。
82
80
 
83
81
  インプットに```<script type="text/javascript">alert("こんにちは")</script>```と入力してみてください。javascriptが実行できてしまいます。
84
82