書き方いろんなサイトを参考にして見ながらですが、書いたので間違ってはいないと思うのですが、ajaxを通ってくれません。
Ajax側に問題があると思うのですが、どこがいけないのわかりません。
php
1//index.blade.php 2@extends('layouts.app') 3@section('content') 4<!DOCTYPE html> 5<html lang="ja" dir="ltr"> 6 <head> 7 <meta charset="utf-8"> 8 <title></title> 9 <!-- Jquey --> 10 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 11 <!-- bootstrap --> 12 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 13 <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> 14 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> 15 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 16 <script type="text/javascript" src="js/post.js"></script> 17 </head> 18 <body> 19 20 </body> 21</html> 22<div class="row"> 23 <div class="col-md-12"> 24 <h1>OriginLaravel Ajax</h1> 25 </div> 26</div> 27 28<div class="row"> 29 <div class="table table-responsive"> 30 <table class="table table-bordered" id="table"> 31 <tr> 32 <th width="150px">No</th> 33 <th>Title</th> 34 <th>Body</th> 35 <th>Create At</th> 36 <th class="text-center" width="150px"> 37 <a href="#" class="create-modal btn btn-success btn-sm"> 38 <i class="fa fa-plus"></i> 39 </a> 40 </th> 41 </tr> 42 {{ csrf_field() }} 43 @foreach ($post as $key => $value) 44 <tr class="post{{$value->id}}"> 45 <td>{{ $no++ }}</td> 46 <td>{{ $value->title }}</td> 47 <td>{{ $value->body }}</td> 48 <td>{{ $value->create_at }}</td> 49 <td> 50 <a href="#" class="show-modal btn btn-info btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}"> 51 <i class="fa fa-eye"></i> 52 </a> 53 <a href="#" class="show-modal btn btn-warning btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}"> 54 <i class="fa fa-pencil"></i> 55 </a> 56 <a href="#" class="show-modal btn btn-danger btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}"> 57 <i class="fa fa-trash"></i> 58 </a> 59 </td> 60 @endforeach 61 </table> 62 </div> 63</div> 64<!-- Form create post --> 65<div id="create" class="modal fade" role="dialog"> 66 <div class="modal-dialog"> 67 <div class="modal-content"> 68 <div class="modal-header"> 69 <h4 class="modal-title"></h4> 70 <button type="button" class="close" data-dismiss="modal">×</button> 71 </div> 72 <div class="modal-body"> 73 <form class="form-horizontal" role="form"> 74 <div class="form-group row add"> 75 <label class="control-label col-sm-2" for="title">Title :</label> 76 <div class="col-sm-10"> 77 <input type="text" class="form-control" id="title" name="title" 78 placeholder="Your Title Here" required> 79 <!-- <p class="error text-center alert alert-danger hidden"></p> --> 80 </div> 81 </div> 82 <div class="form-group row add"> 83 <label class="control-label col-sm-2" for="body">Body :</label> 84 <div class="col-sm-10"> 85 <input type="text" class="form-control" id="body" name="body" placeholder="Your Body Here" required> 86 <!-- <p class="error text-center alert alert-danger hidden"></p> --> 87 </div> 88 </div> 89 </form> 90 </div> 91 <div class="modal-footer"> 92//ここのボタンをクリックするとpost.jsのajaxが呼ばれる 93 <button class="btn btn-warning" type="submit" id="add"> 94 <span class="fa fa-plus"></span>Save Post 95 </button> 96 <button class="btn btn-warning" type="button" data-dismiss="modal"> 97 <span class="fa fa-remode"></span>Close 98 </button> 99 </div> 100 </div> 101</div> 102</div> 103@endsection 104
js
1//post.js 2 3//ajax form add 4$(document).on('click','.create-modal',function(){ 5 $('#create').modal('show'); 6 $('.form-horizontal').show(); 7 $('.modal-title').text('Add Post'); 8}); 9//id=addがクリックされたら 10$('#add').click(function(){ 11 $.ajax({ 12 type : 'post', 13 url : 'addPost', 14 data : { 15 '_token' : $('input[name = _token]').val(), 16 'title': $('input[name=title]').val(), 17 'body': $('input[name=body]').val(), 18 }.done( (data) => { 19 if((data.errors)) { 20 $('.error').removeClass('hidden'); 21 $('.error').text(data.errors.title); 22 $('.error').text(data.errors.body); 23 }else{ 24 //一つの要素を全削除 25 $('.error').remove(); 26 //TABLE要素の末尾に入れる 27 $('#table').append("<tr class= 'post" + data.id + "'>"+ 28 "<td>" + data.id + "</td>" + 29 "<td>" + data.title + "</td>" + 30 "<td>" + data.body + "</td>" + 31 "<td>" + data.created_at + "</td>" + 32 "<td><a class='show-modal btn btn-info btn-sm' data-id='" + data.id + "' data-title='" + data.title + "'data-body='" + data.body+"'>"+ 33 "<i class='fa fa-eye'></i></a>"+ 34 "<td><a class='edit-modal btn btn-warning btn-sm' data-id='" + data.id + "' data-title='" + data.title + "'data-body='" + data.body+"'>"+ 35 "<i class='fa fa-pencil'></i></a>"+ 36 "<td><a class='delete-modal btn btn-danger btn-sm' data-id='" + data.id + "' data-title='" + data.title + "'data-body='" + data.body+"'>"+ 37 "<i class='fa fa-trash'></i></a>"+ 38 "</td>"+ 39 "</tr>"); 40 } 41 }), 42 }); 43 $('#title').val(''); 44 $('#body').val(''); 45}); 46
addPostはこちらで設定しています。
php
1<?php 2 3namespace App\Http\Controllers; 4 5use Illuminate\Http\Request; 6use App\Post; 7use Validator; 8use RSesponse; 9use Illuminate\Support\Facedes\input; 10use App\http\Requests; 11class PostController extends Controller 12{ 13 public function index(){ 14 $post = Post::all(); 15 return view('post.index',compact('post')); 16 } 17 18 public function addPost(Request $req){ 19 $rules = array( 20 'title' => 'required', 21 'body' =>'required', 22 ); 23 $validator = Varidator::make( input::all(),$rules); 24 if($validator->fails()){ 25 return response::json(array('errors'=>$validator->getMessage()->toarray())); 26 }else{ 27 $post = new post; 28 $post->title = $req->title; 29 $post->body = $req->body; 30 $post->save(); 31 return response()->json($post); 32 } 33 } 34} 35
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/11 02:41
2018/07/11 02:49
2018/07/11 03:02
2018/07/11 03:16