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

質問編集履歴

3

追記

2018/03/06 08:03

投稿

MeB
MeB

スコア104

title CHANGED
File without changes
body CHANGED
@@ -124,4 +124,57 @@
124
124
  のようなものが帰ってきていることは確認できるのですが、
125
125
  上記のphp内の<script>を
126
126
  mamp/htdocs/json/json.jsを作りそちらに記述し、
127
- 直接URLを打ち込んでみましたがconsole内にはなにも表示されませんでした…
127
+ 直接URLを打ち込んでみましたがconsole内にはなにも表示されませんでした…
128
+
129
+ ```js
130
+ $( function() {
131
+
132
+ $('#btn1').click(
133
+ function(){
134
+ $("#out6").html("データ取得中です");
135
+
136
+ // 1.$.ajaxメソッドで通信を行います。
137
+ // dataでは、フォームの内容をserialize()している
138
+ // →serialize()の内容は、cs1=custom1&cs2=custom2
139
+ $.ajax({
140
+ url:'http://httpbin.org/post', // 通信先のURL
141
+ type:'POST', // 使用するHTTPメソッド (GET/ POST)
142
+ data:$("#form1").serialize(), // 送信するデータ
143
+ dataType:'text', // 応答のデータの種類
144
+ // (xml/html/script/json/jsonp/text)
145
+ timeout:1000, // 通信のタイムアウトの設定(ミリ秒)
146
+
147
+ // 2. doneは、通信に成功した時に実行される
148
+ // 引数のdata1は、通信で取得したデータ
149
+ // 引数のtextStatusは、通信結果のステータス
150
+ // 引数のjqXHRは、XMLHttpRequestオブジェクト
151
+ }).done(function(data1,textStatus,jqXHR) {
152
+ $("#out1").html(jqXHR.status); //jqXHR.statusを表示
153
+ $("#out2").html(textStatus); //textStatusを表示
154
+
155
+ // 3. キーを指定して値を表示
156
+ $("#out4").html(data1["form"]["cs1"]);
157
+
158
+ // 4. オブジェクトをJSON形式の文字列に変換
159
+ var data2 = JSON.stringify(data1);
160
+ console.log(data2); //コンソールにJSON形式で表示される
161
+
162
+ // 5.JSON形式の文字列をオブジェクトにし、
163
+ // キーを指定して値(httpbin.org)を表示
164
+ var data3 = JSON.parse(data2);
165
+ $("#out5").html(data3["headers"]["Host"]);
166
+
167
+ // 6. failは、通信に失敗した時に実行される
168
+ }).fail(function(jqXHR, textStatus, errorThrown ) {
169
+ $("#out1").html(jqXHR.status); //jqXHR.statusを表示
170
+ $("#out2").html(textStatus); //textStatusを表示
171
+ $("#out3").html(errorThrown); //errorThrownを表示
172
+
173
+ // 7. alwaysは、成功/失敗に関わらず実行される
174
+ }).always(function(){
175
+ $("#out6").html("complete"); //表示3
176
+
177
+ });
178
+ });
179
+ });
180
+ ```

2

追記

2018/03/06 08:03

投稿

MeB
MeB

スコア104

title CHANGED
File without changes
body CHANGED
@@ -113,4 +113,15 @@
113
113
  </form>
114
114
  </body>
115
115
  </html>
116
- ```
116
+ ```
117
+
118
+ 追記
119
+ url部分をhttp://httpbin.org/post
120
+ にもどすと
121
+ ```json
122
+ {"args":{},"data":"","files":{},"form":{"cs1":"custom1","cs2":"custom2"},"headers":{"Accept":"application/json, text/javascript, */*; q=0.01","Accept-Encoding":"gzip, deflate","Accept-Language":"ja,en-US;q=0.9,en;q=0.8"...}
123
+ ```
124
+ のようなものが帰ってきていることは確認できるのですが、
125
+ 上記のphp内の<script>を
126
+ mamp/htdocs/json/json.jsを作りそちらに記述し、
127
+ 直接URLを打ち込んでみましたがconsole内にはなにも表示されませんでした…

1

訂正

2018/03/06 06:30

投稿

MeB
MeB

スコア104

title CHANGED
File without changes
body CHANGED
@@ -32,4 +32,85 @@
32
32
  json/ ←これにするとerror(404)
33
33
 
34
34
  MAMP上では不可能ということでしょうか?
35
- ご教示宜しくお願いします。
35
+ ご教示宜しくお願いします。
36
+
37
+ ```php
38
+ <!DOCTYPE html>
39
+ <html lang="ja">
40
+ <head>
41
+ <meta charset="utf-8">
42
+ <title>jqueryのajaxのサンプル</title>
43
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
44
+ <script>
45
+ $( function() {
46
+
47
+ $('#btn1').click(
48
+ function(){
49
+ $("#out6").html("データ取得中です");
50
+
51
+ // 1.$.ajaxメソッドで通信を行います。
52
+ // dataでは、フォームの内容をserialize()している
53
+ // →serialize()の内容は、cs1=custom1&cs2=custom2
54
+ $.ajax({
55
+ url:'/json/post', // 通信先のURL
56
+ type:'POST', // 使用するHTTPメソッド (GET/ POST)
57
+ data:$("#form1").serialize(), // 送信するデータ
58
+ dataType:'json', // 応答のデータの種類
59
+ // (xml/html/script/json/jsonp/text)
60
+ timeout:1000, // 通信のタイムアウトの設定(ミリ秒)
61
+
62
+ // 2. doneは、通信に成功した時に実行される
63
+ // 引数のdata1は、通信で取得したデータ
64
+ // 引数のtextStatusは、通信結果のステータス
65
+ // 引数のjqXHRは、XMLHttpRequestオブジェクト
66
+ }).done(function(data1,textStatus,jqXHR) {
67
+ $("#out1").html(jqXHR.status); //jqXHR.statusを表示
68
+ $("#out2").html(textStatus); //textStatusを表示
69
+
70
+ // 3. キーを指定して値を表示
71
+ $("#out4").html(data1["form"]["cs1"]);
72
+
73
+ // 4. オブジェクトをJSON形式の文字列に変換
74
+ var data2 = JSON.stringify(data1);
75
+ console.log(data2); //コンソールにJSON形式で表示される
76
+
77
+ // 5.JSON形式の文字列をオブジェクトにし、
78
+ // キーを指定して値(httpbin.org)を表示
79
+ var data3 = JSON.parse(data2);
80
+ $("#out5").html(data3["headers"]["Host"]);
81
+
82
+ // 6. failは、通信に失敗した時に実行される
83
+ }).fail(function(jqXHR, textStatus, errorThrown ) {
84
+ $("#out1").html(jqXHR.status); //jqXHR.statusを表示
85
+ $("#out2").html(textStatus); //textStatusを表示
86
+ $("#out3").html(errorThrown); //errorThrownを表示
87
+
88
+ // 7. alwaysは、成功/失敗に関わらず実行される
89
+ }).always(function(){
90
+ $("#out6").html("complete"); //表示3
91
+
92
+ });
93
+ });
94
+ });
95
+ </script>
96
+ </head>
97
+ <body >
98
+ <p>jqXHR.statusを表示:<span id="out1"></span></p>
99
+ <p>textStatusを表示:<span id="out2"></span></p>
100
+ <p>errorThrownを表示:<span id="out3"></span></p>
101
+ <p>表示1:<span id="out4"></span></p>
102
+ <p>表示2:<span id="out5"></span></p>
103
+ <p>表示3:<span id="out6"></span></p>
104
+
105
+ <p>ボタンを押すと通信が始まります</p>
106
+
107
+ <form id="form1">
108
+ <input type="button" id="btn1" value="ボタン1"><br/>
109
+ テキストボックス1<br/>
110
+ <input type="text" name="cs1" value="custom1" maxlength="10"><br/>
111
+ テキストボックス2<br/>
112
+ <input type="text" name="cs2" value="custom2" maxlength="10">
113
+ </form>
114
+ </body>
115
+ </html>
116
+ ```