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

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

ただいまの
回答率

90.50%

  • PHP

    20359questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16436questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ajax

    1090questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

AjaxでPHPにPOST通信できない

解決済

回答 2

投稿 編集

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

masateru2

score 23

書き方いろんなサイトを参考にして見ながらですが、書いたので間違ってはいないと思うのですが、ajaxを通ってくれません。
Ajax側に問題があると思うのですが、どこがいけないのわかりません。

//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">
            <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">
//ここのボタンをクリックするとpost.jsの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>
@endsection
//post.js

//ajax form add
$(document).on('click','.create-modal',function(){
  $('#create').modal('show');
  $('.form-horizontal').show();
  $('.modal-title').text('Add Post');
});
//id=addがクリックされたら
$('#add').click(function(){
  $.ajax({
    type : 'post',
    url : '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>");
      }
    }),
  });
  $('#title').val('');
  $('#body').val('');
});


addPostはこちらで設定しています。

<?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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+2

とりあえず

  $.ajax({
type : 'post',
url : 'addPost',
data : {
'_token' : $('input[name = _token]').val(),
'title': $('input[name=title]').val(),
'body': $('input[name=body]').val(),
}.done( (data) => {

となっていますが
dataの{}のあとに)が抜けてます。
文法エラーの場合はそれなりのメッセージが出ていると思いますので
ひとつひとつ潰してください

それといくつか・・・

  • 最初から詰め込み過ぎなので、データの疎通できるところまでもっていってください
  • doneだけではなくfailを指定してエラーの受口をつくってください
  • ajaxのurlが'addPost'となっておりphpを指定していませんが大丈夫ですか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/11 11:41

    failも作り、dataの{}のあとの)も入れましたが、そもそもAjaxに通っていないのか、failにすら通らないです。。

    キャンセル

  • 2018/07/11 11:49

    とりあえずもっと簡略化して動くところを確認してから、
    徐々に仕様をたしてみてください

    キャンセル

  • 2018/07/11 12:02

    わかりました。簡易的なAjaxを動かして見たいと思います。

    キャンセル

  • 2018/07/11 12:16

    直接index.blade.phpにajax書き込んだら通りました。
    なぜなのかわかりませんが。。

    キャンセル

0

ajax云々ではなく、jqueryでclickイベントが発火していないかと思います。

<head>で外部ファイルの"post.js"を読み込んでいますが、この時点で#addボタンは画面上にありません。
そのため、すぐにclickイベントを登録しても効果がありません。

修正方法としては2パターン考えられます。

$(document).readyを使って、DOMが準備できたら$('#add').click()を実行する方法、
または、"post.js"の読み込み自体を遅らせる方法(bodyの一番したで読み込む)。

html側(index.blade.php)に書いたらうまくいった、というのはボタンタグより下に書いたのではないでしょうか。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • PHP

    20359questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16436questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ajax

    1090questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。