ajax経由でjsonデータをPOST送信したい

Question

前提・実現したいこと

jsonデータをajax経由でサーバへPOST送信したいのですが、サーバ側で受け取ると空になってしまい、受け取ることが出来ません。

該当のソースコード

jsonデータ

jsonData =
{"type":"paragraph","data":{"text":"テスト"}}

ajax処理

$.ajax({
   'url': url,
   'type': 'post',
    'data': {
         jsonData: jsonData,
      },
    'timeout': 10000,
    'dataType': "json",
    }).done(function (data) {
　　　　　　　　//成功
     }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
              //失敗
      });

サーバ（cakephp3.8）

        if ($this->getRequest()->is('ajax')) {
            $data = $this->getRequest()->getData('jsonData'); //値が空
 
            //何らかの処理           

　　　　　　 //結果をjson形式でセット
            $this->viewBuilder()->setClassName('Json');
            $this->set('result', $result);
            $this->set('_serialize', ['result']);
        }

試したこと

上記コードのサーバ側で$this->getRequest()->getData();した時の値が空になっていて、処理ができない状態です。

get送信にすると$this->getRequest()->getQuery();に値が入ってくるのですが、データが長すぎると414エラーが出てきてしまいます。

contentType: 'application/json',を追加したりなど試してみたのですが、やはり空の状態で値を拾えておりません。

どなたかわかる方がいらっしゃいましたら教えていただけたらと思います。

Answer 1

config/routes.phpでjsonの拡張子を有効にした後、リクエストURLを.json形式にしてPOSTしてみて下さい。

• ルーティング - 3.9

2020.09.03 追記

すみません、jsonファイルを送るのではなく、<script></script>内で生成したjsonデータを送りたいです。

紛らわしい書き方をしてしまい、申し訳ございません。

上記の方法はjsonファイルではなくjsonデータを送信する方法です。サンプルコードを以下抜粋して記載します。プロジェクト全体のコードはこちらからご確認ください。

config/routes.php

$routes->prefix('Api', function (RouteBuilder $builder) {
  $builder->setExtensions(['json']);

  $builder->fallbacks(DashedRoute::class);
});

templates/Pages/home.php

<script>
window.addEventListener("DOMContentLoaded", async (event) => {
  const response = await fetch("<?= $this->Url->build([
    'prefix' => 'Api',
    'controller' => 'Users',
    'action' => 'create',
    '_ext' => 'json',
  ]) ?>", {
    method: "post",
    headers: {
      "Content-Type": "application/json",
      "X-CSRF-TOKEN": "<?= $this->request->getCookie('csrfToken') ?>",
    },
    body: JSON.stringify({
      name: "John Doe",
    }),
  });

  const responseData = await response.json();

  console.log({ responseData });
});
</script>

src/Controller/Api/UsersController.php

<?php
declare(strict_types=1);

namespace App\Controller\Api;

use Cake\Log\Log;

class UsersController extends ApiController {
  public function create() {
    Log::debug(var_export([
      'request_data' => $this->request->getData(),
    ], true));

    $success = true;

    $this->set(compact([
      'success',
    ]));

    $this->set('_serialize', [
      'success',
    ]);
  }
}

UsersController::createのログ出力

2020-09-03 04:09:39 Debug: array (
  'request_data' =>
  array (
    'name' => 'John Doe',
  ),
)

Comments

[mittchy]

すみません、jsonファイルを送るのではなく、<script></script>内で生成したjsonデータを送りたいです。
紛らわしい書き方をしてしまい、申し訳ございません。