AjaxでPHPにデータを渡してjsonを書き換える

jQueryでjsonのデータを作成し、phpへデータを渡してjsonファイルの書き換えをしたいと思っております。
phpやjsonはまだ知識が浅いのでご助力いただきたいです。

jQuery
1$('body').on('click','.btn',function(){
2  var hoge = [];
3
4  $('.list').each(function(){//データ作成
5    var id = $(this).data('id');
6    var name = $(this).data('name');
7    hoge.push({"id": id, "name": name});
8  });
9
10  var hogehoge = JSON.stringify(hoge);
11
12  $.ajax({
13    type: "POST",
14    url: "ajax.php",
15    data: hogehoge,
16    dataType : "json"
17  }).done(function(data){
18    
19  }).fail(function(XMLHttpRequest, textStatus, error){
20    console.log(XMLHttpRequest);
21    console.log(textStatus);
22    console.log(error);
23  });
24});

php
1<?php
2  header("Content-type: application/json; charset=UTF-8");
3
4  $datas = filter_input(INPUT_POST,"hogehoge");
5  $data = json_decode($datas,true);
6  
7  $json = fopen('data.json', 'w+b');
8  fwrite($json, json_encode($data));
9  fclose($json);
10?>

この記述にしておりますが、構文が間違っているSyntaxErrorが表示され、textStatusのエラーでも「parsererror」になっております。
phpの記述が間違っていると思うのですが、jsonデータの扱いに慣れていないのでどこが間違っているのかわからない状態です。
ご助力お願い致します。

FKM

2021/03/31 08:50

普通にペーストするだけだと何もエラーは出てないですけどね。直接ブラウザにそのPHPファイルを表示させた場合はなにか表示されますか？

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

回答1件

ベストアンサー

構文が間違っているSyntaxErrorが表示され、textStatusのエラーでも「parsererror」になっております。

これは、AJAXに失敗した際のfailメソッドにより発生しているので真の原因ではないです。ブラウザの開発ツールを使ってブレークポイントやステップ実行する方法を学びましょう。
以下、簡単に修正してみましたが、まずはJavaScript側に1行追加します。これにより、JSON形式でPOSTするようになります。

JavaScript
1$.ajax({
2    type: "POST",
3    url: "ajax.php",
4    data: hogehoge,
5    contentType: 'application/json',   // この行を追加
6    dataType : "json"

JSON形式の受け取りはPHPでは以下のようにします。

  // $datas = filter_input(INPUT_POST,"hogehoge");  // この行を
  $datas = file_get_contents("php://input");        // このように変更
  $data = json_decode($datas,true);
  echo $datas; // さしあたり、受け取ったJSONをそのまま表示しているが、実際には処理結果をJSON形式で返す

こんな感じでいかがでしょうか。前にも書いたように、ブラウザの開発ツールの使い方を覚えるのが吉かと思います。

投稿2021/03/31 08:56