【ajax】$.ajaxで通信を行ってJSONを取得したい

https://itsakura.com/jquery-ajax#s4
こちらのサイトを参考にといいますかまず
全部コピペして
mamp/htdocs/json/index.php
にファイルを作成しました。
これはうまくいきました。（当たり前ですが）

次に

js
1$.ajax({  
2    url:'http://httpbin.org/post', // 通信先のURL
3    type:'POST',    // 使用するHTTPメソッド (GET/ POST)
4    data:$("#form1").serialize(), // 送信するデータ
5    dataType:'json', // 応答のデータの種類

という部分を

js
1$.ajax({  
2    url:'/json/', // 通信先のURL   **ここを変えました。**
3    type:'POST',    // 使用するHTTPメソッド (GET/ POST)
4    data:$("#form1").serialize(), // 送信するデータ
5    dataType:'json', // 応答のデータの種類

すると結果が
parsererror
になってしまいます。

試したもの
/json/index.php ←これにするとparsererror(200)
/json/ ←これにするとparsererror(200)
json/index.php ←これにするとerror(404)
json/ ←これにするとerror(404)

MAMP上では不可能ということでしょうか？
ご教示宜しくお願いします。

php
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>jqueryのajaxのサンプル</title>
6<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
7<script>
8$( function() {
9
10$('#btn1').click(
11function(){
12  $("#out6").html("データ取得中です");
13
14  // 1.$.ajaxメソッドで通信を行います。
15  //  dataでは、フォームの内容をserialize()している
16  //  →serialize()の内容は、cs1=custom1&cs2=custom2
17  $.ajax({  
18    url:'/json/post', // 通信先のURL
19    type:'POST',    // 使用するHTTPメソッド (GET/ POST)
20    data:$("#form1").serialize(), // 送信するデータ
21    dataType:'json', // 応答のデータの種類 
22            // (xml/html/script/json/jsonp/text)
23    timeout:1000,     // 通信のタイムアウトの設定(ミリ秒)
24
25    // 2. doneは、通信に成功した時に実行される
26    //  引数のdata1は、通信で取得したデータ
27    //  引数のtextStatusは、通信結果のステータス
28    //  引数のjqXHRは、XMLHttpRequestオブジェクト
29    }).done(function(data1,textStatus,jqXHR) {
30        $("#out1").html(jqXHR.status); //jqXHR.statusを表示
31        $("#out2").html(textStatus); //textStatusを表示
32
33        // 3. キーを指定して値を表示 
34        $("#out4").html(data1["form"]["cs1"]);
35
36        // 4. オブジェクトをJSON形式の文字列に変換
37        var data2 = JSON.stringify(data1);
38        console.log(data2); //コンソールにJSON形式で表示される
39
40        // 5.JSON形式の文字列をオブジェクトにし、
41        // キーを指定して値(httpbin.org)を表示
42        var data3 = JSON.parse(data2);
43        $("#out5").html(data3["headers"]["Host"]);
44
45    // 6. failは、通信に失敗した時に実行される
46    }).fail(function(jqXHR, textStatus, errorThrown ) {
47        $("#out1").html(jqXHR.status); //jqXHR.statusを表示
48        $("#out2").html(textStatus); //textStatusを表示
49        $("#out3").html(errorThrown); //errorThrownを表示
50
51    // 7. alwaysは、成功/失敗に関わらず実行される
52    }).always(function(){
53        $("#out6").html("complete"); //表示3
54        
55  });
56});
57});
58</script>
59</head>
60<body >
61<p>jqXHR.statusを表示：<span id="out1"></span></p>
62<p>textStatusを表示：<span id="out2"></span></p>
63<p>errorThrownを表示：<span id="out3"></span></p>
64<p>表示1：<span id="out4"></span></p>
65<p>表示2：<span id="out5"></span></p>
66<p>表示3：<span id="out6"></span></p>
67
68<p>ボタンを押すと通信が始まります</p>
69
70<form id="form1">
71<input type="button" id="btn1" value="ボタン1"><br/>
72テキストボックス１<br/>
73<input type="text" name="cs1" value="custom1" maxlength="10"><br/>
74テキストボックス２<br/>
75<input type="text" name="cs2" value="custom2" maxlength="10">
76</form>
77</body>
78</html>

追記
url部分をhttp://httpbin.org/post
にもどすと

json
1{"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"...}

のようなものが帰ってきていることは確認できるのですが、
上記のphp内の<script>を
mamp/htdocs/json/json.jsを作りそちらに記述し、
直接URLを打ち込んでみましたがconsole内にはなにも表示されませんでした…

js
1$( function() {
2
3$('#btn1').click(
4function(){
5  $("#out6").html("データ取得中です");
6
7  // 1.$.ajaxメソッドで通信を行います。
8  //  dataでは、フォームの内容をserialize()している
9  //  →serialize()の内容は、cs1=custom1&cs2=custom2
10  $.ajax({  
11    url:'http://httpbin.org/post', // 通信先のURL
12    type:'POST',    // 使用するHTTPメソッド (GET/ POST)
13    data:$("#form1").serialize(), // 送信するデータ
14    dataType:'text', // 応答のデータの種類 
15            // (xml/html/script/json/jsonp/text)
16    timeout:1000,     // 通信のタイムアウトの設定(ミリ秒)
17
18    // 2. doneは、通信に成功した時に実行される
19    //  引数のdata1は、通信で取得したデータ
20    //  引数のtextStatusは、通信結果のステータス
21    //  引数のjqXHRは、XMLHttpRequestオブジェクト
22    }).done(function(data1,textStatus,jqXHR) {
23        $("#out1").html(jqXHR.status); //jqXHR.statusを表示
24        $("#out2").html(textStatus); //textStatusを表示
25
26        // 3. キーを指定して値を表示 
27        $("#out4").html(data1["form"]["cs1"]);
28
29        // 4. オブジェクトをJSON形式の文字列に変換
30        var data2 = JSON.stringify(data1);
31        console.log(data2); //コンソールにJSON形式で表示される
32
33        // 5.JSON形式の文字列をオブジェクトにし、
34        // キーを指定して値(httpbin.org)を表示
35        var data3 = JSON.parse(data2);
36        $("#out5").html(data3["headers"]["Host"]);
37
38    // 6. failは、通信に失敗した時に実行される
39    }).fail(function(jqXHR, textStatus, errorThrown ) {
40        $("#out1").html(jqXHR.status); //jqXHR.statusを表示
41        $("#out2").html(textStatus); //textStatusを表示
42        $("#out3").html(errorThrown); //errorThrownを表示
43
44    // 7. alwaysは、成功/失敗に関わらず実行される
45    }).always(function(){
46        $("#out6").html("complete"); //表示3
47        
48  });
49});
50});

kszk311

2018/03/06 05:17

PHPのファイルの中身も記載してください。

MeB

2018/03/06 05:18

失礼しました。追記します。

kszk311

2018/03/06 05:21

ありがとうございます、「mamp/htdocs/json/index.php」の方もお願いします

kszk311

2018/03/06 05:24

失礼、リクエスト先の、JSONファイルを返そうとしているファイルの処理を追記してください、という事でした

MeB

2018/03/06 05:25

あ、すみません。このphpがindex.phpです。まとめてこれに記述しています。

行動規範の内容に同意します

回答3件

ベストアンサー

「/json/post」でリクエストを投げた時、JSON形式で取得できなければパースエラーになります。
https://www.ibm.com/support/knowledgecenter/ja/SS9H2Y_7.1.0/com.ibm.dp.doc/json_jsonexamples.html

dataTypeを「text」にすると、どんな値が返ってきてるか確認できると思います。
そうすると、自身のHTMLが返ってきているはずです。

一度、JSONファイルを生成する処理だけのファイルを作成し、そのファイル（URL）にアクセスして確認して見るのがいいと思います。

1ファイルのみで実装する場合

とりあえず、1ファイルのみで実装する場合のサンプルを追記しておきます。
HTMLを出力する前に、JSON形式で出力して、そこでPHP終えておく必要があります。

php
1<?php
2
3if(!empty($_POST)){
4
5	echo json_encode($_POST);
6	exit();
7}
8	
9?><!doctype html>
10<html>
11<head>
12<meta charset="UTF-8">
13<title>Sample</title>
14<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
15<script type="text/javascript">
16$(function(){
17	$('#submit').click(function(e){
18		e.preventDefault();
19		
20		$.ajax({  
21			url:'<?php echo $_SERVER['REQUEST_URI']; ?>', // 通信先のURL
22			type:'POST',    // 使用するHTTPメソッド (GET/ POST)
23			data:$("#form1").serialize(), // 送信するデータ
24			dataType:'json', // 応答のデータの種類 
25			// (xml/html/script/json/jsonp/text)
26			timeout:1000,     // 通信のタイムアウトの設定(ミリ秒)
27
28			// 2. doneは、通信に成功した時に実行される
29			//  引数のdata1は、通信で取得したデータ
30			//  引数のtextStatusは、通信結果のステータス
31			//  引数のjqXHRは、XMLHttpRequestオブジェクト
32		}).done(function(data1,textStatus,jqXHR) {
33			console.log(data1);
34		});
35		return false;
36	});
37})
38</script>
39</head>
40<body>
41<form id="form1" method="post">
42	<input name="aaa" value="">
43	<button id="submit" type="button">送信</button>
44</form>
45</body>
46</html>

投稿2018/03/06 05:32

編集2018/03/06 06:30

kszk311

総合スコア3404

MeB

2018/03/06 06:30

追記しました。

kszk311

2018/03/06 07:32

>mamp/htdocs/json/json.jsを作りそちらに記述し、 >直接URLを打ち込んでみましたがこの部分のコードを教えてもらえますか

MeB

2018/03/06 08:07

追記しました。 1ファイルのみで実装する場合というものではデータが取れました。ブラウザに表示しようと console.log(data1);のしたに$("#out4").html(data["form1"]["aaa"]); </form>のしたに<p>表示1：<span id="out4"></span></p> を追加したのですが、 {aaa: ""} (index):26 Uncaught ReferenceError: jsObject is not defined at Object.<anonymous> ((index):26) at i (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at A (jquery.min.js:4) at XMLHttpRequest.<anonymous> (jquery.min.js:4) というエラーがでました。 $("#out4").text("out4:" + jsObject["out4"]); こちらも試しましたが同じエラーでした…すみません。

MeB

2018/03/06 08:14

表示については$("#out4").html(data["aaa"]);でいけました。すみません。

MeB

2018/03/06 08:26

すみません。解決しました。お力添えありがとうございます！！！！！！！

MeB

2018/03/06 08:39

ちなみになんですが、 js部分を別ファイルにする場合はurlはどのような記述をするのでしょうか…。すみません。

kszk311

2018/03/06 09:56

少しの間見れてませんでしたが、こちらで解決した感じですか？ https://teratail.com/questions/116342