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

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

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

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

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

Ajax

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

Q&A

解決済

1回答

2592閲覧

LaravelでAjax通信に失敗する

creative_09

総合スコア80

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

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

Ajax

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

0グッド

0クリップ

投稿2020/05/20 10:42

laravelでajax通信がうまく行かないのですが、
どこかまちがっている箇所があるのでしょうか?
よろしくお願い致します

testをクリックすると、failに記述の
Ajaxリクエスト失敗
と出てます。

web.php

Route::post('laravel/ajax','AjaxController@ajaxMessage');

AjaxController.php

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class AjaxController extends Controller { // public function ajaxMessage(Request $request) { $data = $request->all(); $message = $data['text']; return $message; } }

sample.blade.php

<div id="excute">test</div> <script> $(function() { $('#excute').on('click', function() { $.ajax({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },//Headersを書き忘れるとエラーになる url: '/laravel/ajax',//ご自身のweb.phpのURLに合わせる type: 'POST',//リクエストタイプ data: {'user_id': '1', 'text': 'Ajax成功'},//Laravelに渡すデータ contentType: false,//渡すデータによって必要(文字列だけなら不要) processData: false,//渡すデータによって必要(文字列だけなら不要) }) // Ajaxリクエスト成功時の処理 .done(function(data) { // Laravel内で処理された結果がdataに入って返ってくる $('#message').text(data); }) // Ajaxリクエスト失敗時の処理 .fail(function(data) { alert('Ajaxリクエスト失敗'); }); }); }); </script>

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

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

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

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

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

guest

回答1

0

ベストアンサー

test.blade.php

1<html> 2<head> 3<meta name="csrf-token" content="{{ csrf_token() }}"> 4</head> 5<body> 6 7<script src="{{ mix('js/app.js') }}"></script> 8 9<div id="excute">test</div> 10 11<script> 12 $(function() { 13 $('#excute').on('click', function() { 14 $.ajax({ 15 headers: { 16 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 17 },//Headersを書き忘れるとエラーになる 18 url: '/test',//ご自身のweb.phpのURLに合わせる 19 type: 'POST',//リクエストタイプ 20 data: {'user_id': '1', 'text': 'Ajax成功'},//Laravelに渡すデータ 21 // contentType: false,//渡すデータによって必要(文字列だけなら不要) 22 // processData: false,//渡すデータによって必要(文字列だけなら不要) 23 }) 24 // Ajaxリクエスト成功時の処理 25 .done(function(data) { 26 // Laravel内で処理された結果がdataに入って返ってくる 27 $('#message').text(data); 28 }) 29 // Ajaxリクエスト失敗時の処理 30 .fail(function(data) { 31 alert('Ajaxリクエスト失敗'); 32 }); 33 }); 34 }); 35 </script> 36</body> 37</html>

で取りあえず動くの確認しました

web.php

1Route::get('/test', function () { 2 return view('test'); 3}); 4 5Route::post('/test', function (\Illuminate\Http\Request $request) { 6 $data = $request->all(); 7 $message = $data['text']; 8 return $message; 9});

投稿2020/05/20 12:26

rururu3

総合スコア5545

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

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

creative_09

2020/05/20 13:25

ありがとうございます。 わざわざ動かして頂いて申し訳ないです。 この場合、成功時の処理としてちゃんと動作するのでしょうか?
rururu3

2020/05/20 13:40

はい、動くのまで確認しました(.done(function(data) {のところに行く)
creative_09

2020/05/20 13:59

ありがとうございます。 エラー500が出ていたのでそちらも修正するとうまく動きました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問