laravelのPOST処理をajaxで行なっているのですが、URL遷移が行えない

Ajax通信を行なっていたところ毎回failを通ってしまいます。
エラー内容を見るとサーバーエラーが起きている？のですかね？

Title Bodyの中身をデバッグで調べてところ中身が確認できなかったのですが、データの受け渡しの書き方からまちがっているのですかね？POSTする段階でエラーが起きていると思われます

//クロームデベロッパーツール　エラー内容
jquery.min.js:4 POST http://127.0.0.1:8000/addPost 500 (Internal Server Error)
send @ jquery.min.js:4
ajax @ jquery.min.js:4
(anonymous) @ post:119
dispatch @ jquery.min.js:3
q.handle @ jquery.min.js:3

このエラー見た感じファイルがない？

xhrでのエラー
{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
abort
:
ƒ (a)
always
:
ƒ ()
catch
:
ƒ (a)
done
:
ƒ ()
fail
:
ƒ ()
getAllResponseHeaders
:
ƒ ()
getResponseHeader
:
ƒ (a)
overrideMimeType
:
ƒ (a)
pipe
:
ƒ ()
progress
:
ƒ ()
promise
:
ƒ (a)
readyState
:
4
responseJSON
:
{message: "Class 'App\Http\Controllers\Varidator' not found", exception: "Symfony\Component\Debug\Exception\FatalThrowableError", file: "/Users/kyoshida/Desktop/laravel0619/AjaxCRUD/app/Http/Controllers/PostController.php", line: 23, trace: Array(52)}
responseText
:
"{↵    "message": "Class 'App\Http\Controllers\Varidator' not found",↵    "exception": "Symfony\Component\Debug\Exception\FatalThrowableError",↵    "file": "/Users/kyoshida/Desktop/laravel0619/AjaxCRUD/app/Http/Controllers/PostController.php",↵    "line": 23,↵    "trace": [↵        {↵            "function": "addPost",↵            "class": "App\Http\Controllers\PostController",↵            "type": "->"↵        },↵        {↵            "file": "/Users/kyoshida/Desktop/laravel0619/AjaxCRUD/vendor/laravel/framework/src/Illuminate/Routing/Controller.php",↵            "line": 54,↵            "function": "call_user_func_array"↵        },↵        {↵            "file": "/Users/kyoshida/Desktop/laravel0619/AjaxCRUD/vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php",↵            "line": 45,↵            "function": "callAction",↵            "class": "Illuminate\Routing\Controller",↵            "type": "->"↵        },↵        {↵            "file": "/Users/kyoshida/Desktop/laravel0619/AjaxCRUD/vendor/laravel/framework/src/Illuminate/Routing/Route.php",↵            "line": 212,↵            "function": "dispatch",↵            "class": "Illuminate\Routing\ControllerDispatcher",↵            "type": "->"↵        },↵        {↵            "file": 
:
ƒ (a,b)
state
:
ƒ ()
status
:
500
statusCode
:
ƒ (a)
statusText
:
"Internal Server Error"
then
:
ƒ (b,d,e)
__proto__
:
Object

php
1//index.blade.php
2
3@extends('layouts.app')
4@section('content')
5<!DOCTYPE html>
6<html lang="ja" dir="ltr">
7  <head>
8    <meta charset="utf-8">
9    <title></title>
10        <!-- Jquey -->
11    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
12    <!-- bootstrap -->
13    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
14    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
15    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
16    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
17    <script type="text/javascript" src="js/post.js"></script>
18  </head>
19  <body>
20
21  </body>
22</html>
23<div class="row">
24  <div class="col-md-12">
25    <h1>OriginLaravel Ajax</h1>
26  </div>
27</div>
28
29<div class="row">
30  <div class="table table-responsive">
31    <table class="table table-bordered" id="table">
32      <tr>
33        <th width="150px">No</th>
34        <th>Title</th>
35        <th>Body</th>
36        <th>Create At</th>
37        <th class="text-center" width="150px">
38          <a href="#" class="create-modal btn btn-success btn-sm" id="yo">
39            <i class="fa fa-plus"></i>
40          </a>
41        </th>
42      </tr>
43      {{ csrf_field() }}
44      @foreach ($post as $key => $value)
45       <tr class="post{{$value->id}}">
46         <td>{{ $no++ }}</td>
47         <td>{{ $value->title }}</td>
48         <td>{{ $value->body }}</td>
49         <td>{{ $value->create_at }}</td>
50         <td>
51           <a href="#" class="show-modal btn btn-info btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}">
52             <i class="fa fa-eye"></i>
53           </a>
54           <a href="#" class="show-modal btn btn-warning btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}">
55             <i class="fa fa-pencil"></i>
56           </a>
57           <a href="#" class="show-modal btn btn-danger btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}">
58             <i class="fa fa-trash"></i>
59           </a>
60         </td>
61      @endforeach
62    </table>
63  </div>
64</div>
65<!-- Form create post -->
66<div id="create" class="modal fade" role="dialog">
67  <div class="modal-dialog">
68    <div class="modal-content">
69      <div class="modal-header">
70        <h4 class="modal-title"></h4>
71        <button type="button" class="close" data-dismiss="modal">&times;</button>
72      </div>
73      <div class="modal-body">
74        <form class="form-horizontal" role="form">
75          <div class="form-group row add">
76          <label class="control-label col-sm-2" for="title">Title :</label>
77          <div class="col-sm-10">
78            <input type="text" class="form-control" id="title" name="title"
79            placeholder="Your Title Here" required>
80            <!-- <p class="error text-center alert alert-danger hidden"></p> -->
81          </div>
82        </div>
83        <div class="form-group row add">
84        <label class="control-label col-sm-2" for="body">Body :</label>
85        <div class="col-sm-10">
86          <input type="text" class="form-control" id="body" name="body" placeholder="Your Body Here" required>
87          <!-- <p class="error text-center alert alert-danger hidden"></p> -->
88        </div>
89      </div>
90      </form>
91    </div>
92    <div class="modal-footer">
93//addボタンをクリックするとAjaxが動く。
94      <button class="btn btn-warning" type="submit" id="add">
95        <span class="fa fa-plus"></span>Save Post
96      </button>
97      <button class="btn btn-warning" type="button" data-dismiss="modal">
98        <span class="fa fa-remode"></span>Close
99      </button>
100    </div>
101  </div>
102</div>
103</div>
104
105
106
107//ajax
108<script type="text/javascript">
109
110 $(function(){
111$('#add').on('click',function(){
112  $.ajax({
113    type : 'post',
114    url : 'http://127.0.0.1:8000/addPost',
115    data : {
116      '_token' : $('input[name = _token]').val(),
117      'title': $('input[name=title]').val(),
118      'body': $('input[name=body]').val()}
119    }).done( (data) => {
120      if((data.errors)) {
121        $('.error').removeClass('hidden');
122        $('.error').text(data.errors.title);
123        $('.error').text(data.errors.body);
124      }else{
125      //一つの要素を全削除
126        $('.error').remove();
127      //TABLE要素の末尾に入れる
128        $('#table').append("<tr class= 'post" + data.id + "'>"+
129      "<td>" + data.id + "</td>" +
130      "<td>" + data.title + "</td>" +
131      "<td>" + data.body + "</td>" +
132      "<td>" + data.created_at + "</td>" +
133      "<td><a class='show-modal btn btn-info btn-sm' data-id='" + data.id + "' data-title='" + data.title + "'data-body='" + data.body+"'>"+
134      "<i class='fa fa-eye'></i></a>"+
135      "<td><a class='edit-modal btn btn-warning btn-sm' data-id='" + data.id + "' data-title='" + data.title + "'data-body='" + data.body+"'>"+
136      "<i class='fa fa-pencil'></i></a>"+
137      "<td><a class='delete-modal btn btn-danger btn-sm' data-id='" + data.id + "' data-title='" + data.title + "'data-body='" + data.body+"'>"+
138      "<i class='fa fa-trash'></i></a>"+
139      "</td>"+
140      "</tr>");
141      }
142    }).fail( (data)=>{
143      alert("error");
144    })
145  $('#title').val('');
146  $('#body').val('');
147});
148});
149</script>
150@endsection
151

php
1//PostController.php
2
3<?php
4
5namespace App\Http\Controllers;
6
7use Illuminate\Http\Request;
8use App\Post;
9use Validator;
10use RSesponse;
11use Illuminate\Support\Facedes\input;
12use App\http\Requests;
13class PostController extends Controller
14{
15    public function index(){
16      $post = Post::all();
17      return view('post.index',compact('post'));
18    }
19
20    public function addPost(Request $req){
21      $rules = array(
22        'title' => 'required',
23        'body' =>'required',
24      );
25      $validator = Varidator::make( input::all(),$rules);
26      if($validator->fails()){
27        return response::json(array('errors'=>$validator->getMessage()->toarray()));
28      }else{
29        $post = new post;
30        $post->title = $req->title;
31        $post->body = $req->body;
32        $post->save();
33        return response()->json($post);
34      }
35    }
36}

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

回答1件

ベストアンサー

}).fail( (data)=>{

javascript
1}).fail(function(xhr,err){
2console.log(err);
3});
4

として、エラーメッセージを受け取るところからです。
もっと詳しい情報は
console.log(xhr)
で細か見ていくことができます

投稿2018/07/11 03:36

yambejp

総合スコア114769

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

laravelのPOST処理をajaxで行なっているのですが、URL遷移が行えない

関連した質問