ajaxの422エラー
Q&A
Closed
解決したいこと
現在、laravelを使ったブログを作っています。
TOAST UI Editorというマークダウンエディタを使っているのですが、ここに書いたブログ内容をjs経由でコントローラに送ることができません。
発生している問題・エラー
エラー内容はこんな感じです。
jqXHR : 422
textStatus : error
errorThrown : undefined
422エラーは、中に含まれている指示が処理できなかったことを表しているらしいのですが、どの指示がどう間違っているのかわかりません。
jsファイルのコードは下記のようになっています。
マークダウンエディタに書いた記事内容は、const contents = editor.getValue();で取得しています。
内容がcontentsに送られてきているのは確認済みです。
create.js
$(function($){
$('#form').submit(function(event) {
const contents = editor.getValue();
$.ajax({
url : "/posts" ,
type : "POST",
dataType : "json",
data: { "content" : contents },
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr("content")
},
})
.done(function() {
alert('成功');
})
.fail(function(jqXHR, textStatus, errorThrown) {
alert('ファイルの取得に失敗しました。');
console.log("ajax通信に失敗しました");
console.log("jqXHR : " + jqXHR.status); // HTTPステータスが取得
console.log("textStatus : " + textStatus); // タイムアウト、パースエラー
console.log("errorThrown : " + errorThrown.message); // 例外情報
});
});
});
ブログをPOSTするコントローラはこちらです。
PostController
public function store(PostRequest $request)
{
dd($request->all());
$post = new Post;
$post->user_id = $request->user_id;
$post->content = $request->content;
$post->title = $request->title;
$post->is_published = $request->is_published;
...以下省略
}
まずは、$request->contentに、const content = editor.getValue();この内容が送られてくるようにしたいです。
ブログ作成画面はこうなっています。
create.blade.php
@extends('layouts.app')
@section('content')
<link rel="stylesheet" href="https://uicdn.toast.com/tui-editor/latest/tui-editor.css">
<link rel="stylesheet" href="https://uicdn.toast.com/tui-editor/latest/tui-editor-contents.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
<div class="card-header">新規投稿</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
<div class="card">
<div class="card-body">
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('posts.store') }}" method="POST" enctype="multipart/form-data" id="form">
{{ csrf_field() }}
<div class="form-group">
<label for="exampleInputEmail1">タイトル</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="title" name="title">
</div>
<div class="form-group">
<label for="exampleInputEmail1">カテゴリ</label>
<input type="text" class="form-control" placeholder="category" name="tagcategory">
</div>
<div class="form-group">
<label for="exampleFormControlFile1">サムネイル</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1" name="image">
</div>
<label for="exampleInputEmail1">本文</label>
<div id="file_viewer"></div>
<div id="editSection"></div>
<div class="form-group">
<label for="exampleFormControlSelect1">公開設定</label>
<select input type="id" id="exampleFormControlSelect1" name="is_published">
<option value="1">公開</option>
<option value="0">非公開</option>
</select>
</div>
<input type="hidden" name="user_id" value="{{ Auth::id() }}">
<button type="submit" class="btn btn-primary" id="button">投稿</button>
<a href="{{ route('posts.index') }}" class="btn btn-primary">キャンセル</a>
</form>
</div>
</div>
</div>
<script type="application/javascript" src="https://uicdn.toast.com/tui-editor/latest/tui-editor-Editor-full.js"></script>
<script type="application/javascript" src="{{ asset('js/create.js') }}"></script>
@endsection
自分でも訳が分からなくなっているので説明不足な部分があったらすみません。
0 likes
