質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

解決済

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

MeB
MeB

総合スコア104

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

3回答

0グッド

2クリップ

11394閲覧

投稿2018/03/06 05:11

編集2018/03/06 08:03

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テキストボックス1<br/> 73<input type="text" name="cs1" value="custom1" maxlength="10"><br/> 74テキストボックス2<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});

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

4

ベストアンサー

「/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

総合スコア3402

kei344, yambejp, m.ts10806, MeB👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

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はどのような記述をするのでしょうか…。 すみません。
MeB

2018/03/06 10:02

すみません。ごちゃごちゃしてきた上に別の質問になってきてしまったので別で立てました。 はい!ひとまず解決しました!あとは、フォームのチェックとメール送信という感じです。 ながながとありがとうございました!!!!!また質問すると思いますのでお時間ありましたらみてくださると幸いです。

3

パーサーエラーはdataType dateType で指定した以外の形式でサーバーからデータが
戻ってきているということです。
この場合ですとあたらたに指定したurlがきちんとjsonデータを返すように調整して下さい

※typo修正

投稿2018/03/06 05:21

編集2018/03/06 05:25
yambejp

総合スコア108937

kei344, m.ts10806, MeB👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

MeB

2018/03/06 05:27

回答ありがとうございます。 具体的にはどのように調整するのでしょうか…? すみません…
yambejp

2018/03/06 05:30 編集

それはもうJSONデータを出力するとしか言いようがないですね まずはajaxではなくダイレクトにURLを打ってみて表示されるデータが JSON形式になっているか確認してみてください あとはdataTypeをとりあえずtextにすれば戻りデータ自体は確認できるとおもいます
MeB

2018/03/06 06:32

追記しました。textに直しましたが表示されませんでした。

3

parsererror(200) であればサーバから返答が返って来てはいるが正しいJSON形式でない、ということです。

投稿2018/03/06 05:20

kei344

総合スコア69020

yambejp, m.ts10806, MeB👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

MeB

2018/03/06 05:28

回答ありがとうございます。 正しいjson形式にこの状態で直すことは可能なのでしょう? 可能であればどのように修正するのでしょうか…?すみません。
kei344

2018/03/06 05:33 編集

index.php(Ajaxで読み込むPHPファイル)にHTMLを書かず、正しくJSON用のヘッダを返し、JSON文字列を返す必要がありますので、JSONで受け取りたいなら別途PHPファイルを作ってそちらに処理をかかれては。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。