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

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

ただいまの
回答率

88.06%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 799

score 7

前提・実現したいこと

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',を追加したりなど試してみたのですが、やはり空の状態で値を拾えておりません。

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

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

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',
  ),
)

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/09/03 08:57

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

    キャンセル

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

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

関連した質問

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