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

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

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

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

JavaScript

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

Ajax

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

Q&A

解決済

2回答

535閲覧

AjaxでPHPにPOST通信できない

masateru2

総合スコア39

PHP

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

JavaScript

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

Ajax

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

0グッド

0クリップ

投稿2018/07/11 01:38

編集2018/07/11 02:37

書き方いろんなサイトを参考にして見ながらですが、書いたので間違ってはいないと思うのですが、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">&times;</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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

とりあえず

$.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 01:45

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

masateru2

2018/07/11 02:41

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

2018/07/11 02:49

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

2018/07/11 03:02

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

2018/07/11 03:16

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

0

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

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

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

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

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

投稿2018/07/12 02:52

HiguchiKeita

総合スコア36

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問