teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

追記

2018/03/06 06:30

投稿

kszk311
kszk311

スコア3404

answer CHANGED
@@ -4,4 +4,58 @@
4
4
  dataTypeを「text」にすると、どんな値が返ってきてるか確認できると思います。
5
5
  そうすると、自身のHTMLが返ってきているはずです。
6
6
 
7
- 一度、JSONファイルを生成する処理だけのファイルを作成し、そのファイル(URL)にアクセスして確認して見るのがいいと思います。
7
+ 一度、JSONファイルを生成する処理だけのファイルを作成し、そのファイル(URL)にアクセスして確認して見るのがいいと思います。
8
+
9
+ 1ファイルのみで実装する場合
10
+ ---
11
+ とりあえず、1ファイルのみで実装する場合のサンプルを追記しておきます。
12
+ HTMLを出力する前に、JSON形式で出力して、そこでPHP終えておく必要があります。
13
+
14
+ ```php
15
+ <?php
16
+
17
+ if(!empty($_POST)){
18
+
19
+ echo json_encode($_POST);
20
+ exit();
21
+ }
22
+
23
+ ?><!doctype html>
24
+ <html>
25
+ <head>
26
+ <meta charset="UTF-8">
27
+ <title>Sample</title>
28
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
29
+ <script type="text/javascript">
30
+ $(function(){
31
+ $('#submit').click(function(e){
32
+ e.preventDefault();
33
+
34
+ $.ajax({
35
+ url:'<?php echo $_SERVER['REQUEST_URI']; ?>', // 通信先のURL
36
+ type:'POST', // 使用するHTTPメソッド (GET/ POST)
37
+ data:$("#form1").serialize(), // 送信するデータ
38
+ dataType:'json', // 応答のデータの種類
39
+ // (xml/html/script/json/jsonp/text)
40
+ timeout:1000, // 通信のタイムアウトの設定(ミリ秒)
41
+
42
+ // 2. doneは、通信に成功した時に実行される
43
+ // 引数のdata1は、通信で取得したデータ
44
+ // 引数のtextStatusは、通信結果のステータス
45
+ // 引数のjqXHRは、XMLHttpRequestオブジェクト
46
+ }).done(function(data1,textStatus,jqXHR) {
47
+ console.log(data1);
48
+ });
49
+ return false;
50
+ });
51
+ })
52
+ </script>
53
+ </head>
54
+ <body>
55
+ <form id="form1" method="post">
56
+ <input name="aaa" value="">
57
+ <button id="submit" type="button">送信</button>
58
+ </form>
59
+ </body>
60
+ </html>
61
+ ```

1

修正

2018/03/06 06:30

投稿

kszk311
kszk311

スコア3404

answer CHANGED
@@ -2,6 +2,6 @@
2
2
  [https://www.ibm.com/support/knowledgecenter/ja/SS9H2Y_7.1.0/com.ibm.dp.doc/json_jsonexamples.html](https://www.ibm.com/support/knowledgecenter/ja/SS9H2Y_7.1.0/com.ibm.dp.doc/json_jsonexamples.html)
3
3
 
4
4
  dataTypeを「text」にすると、どんな値が返ってきてるか確認できると思います。
5
- 今の状態だと、自身HTMLが取得されているはずです。
5
+ そうすると、自身HTMLが返っきているはずです。
6
6
 
7
7
  一度、JSONファイルを生成する処理だけのファイルを作成し、そのファイル(URL)にアクセスして確認して見るのがいいと思います。