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

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

質問する

ただいまの
回答率

89.97%

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

解決済

回答 1

投稿 ・編集

  • 評価
  • クリップ 0
  • VIEW 1,383
masateru2

masateru2

score 29

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
//index.blade.php

@extends('layouts.app')
@section('content')
<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
        <!-- Jquey -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- bootstrap -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <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>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="js/post.js"></script>
  </head>
  <body>

  </body>
</html>
<div class="row">
  <div class="col-md-12">
    <h1>OriginLaravel Ajax</h1>
  </div>
</div>

<div class="row">
  <div class="table table-responsive">
    <table class="table table-bordered" id="table">
      <tr>
        <th width="150px">No</th>
        <th>Title</th>
        <th>Body</th>
        <th>Create At</th>
        <th class="text-center" width="150px">
          <a href="#" class="create-modal btn btn-success btn-sm" id="yo">
            <i class="fa fa-plus"></i>
          </a>
        </th>
      </tr>
      {{ csrf_field() }}
      @foreach ($post as $key => $value)
       <tr class="post{{$value->id}}">
         <td>{{ $no++ }}</td>
         <td>{{ $value->title }}</td>
         <td>{{ $value->body }}</td>
         <td>{{ $value->create_at }}</td>
         <td>
           <a href="#" class="show-modal btn btn-info btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}">
             <i class="fa fa-eye"></i>
           </a>
           <a href="#" class="show-modal btn btn-warning btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}">
             <i class="fa fa-pencil"></i>
           </a>
           <a href="#" class="show-modal btn btn-danger btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}">
             <i class="fa fa-trash"></i>
           </a>
         </td>
      @endforeach
    </table>
  </div>
</div>
<!-- Form create post -->
<div id="create" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"></h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form">
          <div class="form-group row add">
          <label class="control-label col-sm-2" for="title">Title :</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="title" name="title"
            placeholder="Your Title Here" required>
            <!-- <p class="error text-center alert alert-danger hidden"></p> -->
          </div>
        </div>
        <div class="form-group row add">
        <label class="control-label col-sm-2" for="body">Body :</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="body" name="body" placeholder="Your Body Here" required>
          <!-- <p class="error text-center alert alert-danger hidden"></p> -->
        </div>
      </div>
      </form>
    </div>
    <div class="modal-footer">
//addボタンをクリックするとAjaxが動く。
      <button class="btn btn-warning" type="submit" id="add">
        <span class="fa fa-plus"></span>Save Post
      </button>
      <button class="btn btn-warning" type="button" data-dismiss="modal">
        <span class="fa fa-remode"></span>Close
      </button>
    </div>
  </div>
</div>
</div>



//ajax
<script type="text/javascript">

 $(function(){
$('#add').on('click',function(){
  $.ajax({
    type : 'post',
    url : 'http://127.0.0.1:8000/addPost',
    data : {
      '_token' : $('input[name = _token]').val(),
      'title': $('input[name=title]').val(),
      'body': $('input[name=body]').val()}
    }).done( (data) => {
      if((data.errors)) {
        $('.error').removeClass('hidden');
        $('.error').text(data.errors.title);
        $('.error').text(data.errors.body);
      }else{
      //一つの要素を全削除
        $('.error').remove();
      //TABLE要素の末尾に入れる
        $('#table').append("<tr class= 'post" + data.id + "'>"+
      "<td>" + data.id + "</td>" +
      "<td>" + data.title + "</td>" +
      "<td>" + data.body + "</td>" +
      "<td>" + data.created_at + "</td>" +
      "<td><a class='show-modal btn btn-info btn-sm' data-id='" + data.id + "' data-title='" + data.title + "'data-body='" + data.body+"'>"+
      "<i class='fa fa-eye'></i></a>"+
      "<td><a class='edit-modal btn btn-warning btn-sm' data-id='" + data.id + "' data-title='" + data.title + "'data-body='" + data.body+"'>"+
      "<i class='fa fa-pencil'></i></a>"+
      "<td><a class='delete-modal btn btn-danger btn-sm' data-id='" + data.id + "' data-title='" + data.title + "'data-body='" + data.body+"'>"+
      "<i class='fa fa-trash'></i></a>"+
      "</td>"+
      "</tr>");
      }
    }).fail( (data)=>{
      alert("error");
    })
  $('#title').val('');
  $('#body').val('');
});
});
</script>
@endsection
//PostController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;
use Validator;
use RSesponse;
use Illuminate\Support\Facedes\input;
use App\http\Requests;
class PostController extends Controller
{
    public function index(){
      $post = Post::all();
      return view('post.index',compact('post'));
    }

    public function addPost(Request $req){
      $rules = array(
        'title' => 'required',
        'body' =>'required',
      );
      $validator = Varidator::make( input::all(),$rules);
      if($validator->fails()){
        return response::json(array('errors'=>$validator->getMessage()->toarray()));
      }else{
        $post = new post;
        $post->title = $req->title;
        $post->body = $req->body;
        $post->save();
        return response()->json($post);
      }
    }
}

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1 件

link

checkベストアンサー

+1

}).fail( (data)=>{ 

}).fail(function(xhr,err){
console.log(err);
});

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る