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

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

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

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

jQuery

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

Ajax

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

Q&A

解決済

3回答

12106閲覧

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

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アプリケーションを実現することができます。

0グッド

2クリップ

投稿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});

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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です。まとめてこれに記述しています。
guest

回答3

0

ベストアンサー

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

2018/03/06 10:02

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

0

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

※typo修正

投稿2018/03/06 05:21

編集2018/03/06 05:25
yambejp

総合スコア114505

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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に直しましたが表示されませんでした。
guest

0

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

投稿2018/03/06 05:20

kei344

総合スコア69357

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MeB

2018/03/06 05:28

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

2018/03/06 05:33 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問