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

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

ただいまの
回答率

87.48%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 10K+

score 96

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

次に

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


という部分を

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


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

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのajaxのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$( function() {

$('#btn1').click(
function(){
  $("#out6").html("データ取得中です");

  // 1.$.ajaxメソッドで通信を行います。
  //  dataでは、フォームの内容をserialize()している
  //  →serialize()の内容は、cs1=custom1&cs2=custom2
  $.ajax({  
    url:'/json/post', // 通信先のURL
    type:'POST',    // 使用するHTTPメソッド (GET/ POST)
    data:$("#form1").serialize(), // 送信するデータ
    dataType:'json', // 応答のデータの種類 
            // (xml/html/script/json/jsonp/text)
    timeout:1000,     // 通信のタイムアウトの設定(ミリ秒)

    // 2. doneは、通信に成功した時に実行される
    //  引数のdata1は、通信で取得したデータ
    //  引数のtextStatusは、通信結果のステータス
    //  引数のjqXHRは、XMLHttpRequestオブジェクト
    }).done(function(data1,textStatus,jqXHR) {
        $("#out1").html(jqXHR.status); //jqXHR.statusを表示
        $("#out2").html(textStatus); //textStatusを表示

        // 3. キーを指定して値を表示 
        $("#out4").html(data1["form"]["cs1"]);

        // 4. オブジェクトをJSON形式の文字列に変換
        var data2 = JSON.stringify(data1);
        console.log(data2); //コンソールにJSON形式で表示される

        // 5.JSON形式の文字列をオブジェクトにし、
        // キーを指定して値(httpbin.org)を表示
        var data3 = JSON.parse(data2);
        $("#out5").html(data3["headers"]["Host"]);

    // 6. failは、通信に失敗した時に実行される
    }).fail(function(jqXHR, textStatus, errorThrown ) {
        $("#out1").html(jqXHR.status); //jqXHR.statusを表示
        $("#out2").html(textStatus); //textStatusを表示
        $("#out3").html(errorThrown); //errorThrownを表示

    // 7. alwaysは、成功/失敗に関わらず実行される
    }).always(function(){
        $("#out6").html("complete"); //表示3

  });
});
});
</script>
</head>
<body >
<p>jqXHR.statusを表示:<span id="out1"></span></p>
<p>textStatusを表示:<span id="out2"></span></p>
<p>errorThrownを表示:<span id="out3"></span></p>
<p>表示1:<span id="out4"></span></p>
<p>表示2:<span id="out5"></span></p>
<p>表示3:<span id="out6"></span></p>

<p>ボタンを押すと通信が始まります</p>

<form id="form1">
<input type="button" id="btn1" value="ボタン1"><br/>
テキストボックス1<br/>
<input type="text" name="cs1" value="custom1" maxlength="10"><br/>
テキストボックス2<br/>
<input type="text" name="cs2" value="custom2" maxlength="10">
</form>
</body>
</html>

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

{"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内にはなにも表示されませんでした…

$( function() {

$('#btn1').click(
function(){
  $("#out6").html("データ取得中です");

  // 1.$.ajaxメソッドで通信を行います。
  //  dataでは、フォームの内容をserialize()している
  //  →serialize()の内容は、cs1=custom1&cs2=custom2
  $.ajax({  
    url:'http://httpbin.org/post', // 通信先のURL
    type:'POST',    // 使用するHTTPメソッド (GET/ POST)
    data:$("#form1").serialize(), // 送信するデータ
    dataType:'text', // 応答のデータの種類 
            // (xml/html/script/json/jsonp/text)
    timeout:1000,     // 通信のタイムアウトの設定(ミリ秒)

    // 2. doneは、通信に成功した時に実行される
    //  引数のdata1は、通信で取得したデータ
    //  引数のtextStatusは、通信結果のステータス
    //  引数のjqXHRは、XMLHttpRequestオブジェクト
    }).done(function(data1,textStatus,jqXHR) {
        $("#out1").html(jqXHR.status); //jqXHR.statusを表示
        $("#out2").html(textStatus); //textStatusを表示

        // 3. キーを指定して値を表示 
        $("#out4").html(data1["form"]["cs1"]);

        // 4. オブジェクトをJSON形式の文字列に変換
        var data2 = JSON.stringify(data1);
        console.log(data2); //コンソールにJSON形式で表示される

        // 5.JSON形式の文字列をオブジェクトにし、
        // キーを指定して値(httpbin.org)を表示
        var data3 = JSON.parse(data2);
        $("#out5").html(data3["headers"]["Host"]);

    // 6. failは、通信に失敗した時に実行される
    }).fail(function(jqXHR, textStatus, errorThrown ) {
        $("#out1").html(jqXHR.status); //jqXHR.statusを表示
        $("#out2").html(textStatus); //textStatusを表示
        $("#out3").html(errorThrown); //errorThrownを表示

    // 7. alwaysは、成功/失敗に関わらず実行される
    }).always(function(){
        $("#out6").html("complete"); //表示3

  });
});
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kszk311

    2018/03/06 14:21

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

    キャンセル

  • kszk311

    2018/03/06 14:24

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

    キャンセル

  • MeB

    2018/03/06 14:25

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

    キャンセル

回答 3

checkベストアンサー

+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

if(!empty($_POST)){

    echo json_encode($_POST);
    exit();
}

?><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#submit').click(function(e){
        e.preventDefault();

        $.ajax({  
            url:'<?php echo $_SERVER['REQUEST_URI']; ?>', // 通信先のURL
            type:'POST',    // 使用するHTTPメソッド (GET/ POST)
            data:$("#form1").serialize(), // 送信するデータ
            dataType:'json', // 応答のデータの種類 
            // (xml/html/script/json/jsonp/text)
            timeout:1000,     // 通信のタイムアウトの設定(ミリ秒)

            // 2. doneは、通信に成功した時に実行される
            //  引数のdata1は、通信で取得したデータ
            //  引数のtextStatusは、通信結果のステータス
            //  引数のjqXHRは、XMLHttpRequestオブジェクト
        }).done(function(data1,textStatus,jqXHR) {
            console.log(data1);
        });
        return false;
    });
})
</script>
</head>
<body>
<form id="form1" method="post">
    <input name="aaa" value="">
    <button id="submit" type="button">送信</button>
</form>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/06 17:39

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

    キャンセル

  • 2018/03/06 18:56

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

    キャンセル

  • 2018/03/06 19:02

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

    キャンセル

+3

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/06 14:28

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

    キャンセル

  • 2018/03/06 14:32 編集

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

    キャンセル

+3

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

※typo修正

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/06 14:27

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

    キャンセル

  • 2018/03/06 14:29 編集

    それはもうJSONデータを出力するとしか言いようがないですね
    まずはajaxではなくダイレクトにURLを打ってみて表示されるデータが
    JSON形式になっているか確認してみてください

    あとはdataTypeをとりあえずtextにすれば戻りデータ自体は確認できるとおもいます

    キャンセル

  • 2018/03/06 15:32

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

    キャンセル

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

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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