Laravel ajax通信がしたい - blueberrydaisukiの忘備録

ajax通信がしたいのです

長いやつを書いてみたいのです

blade


@extends('layout.master')
@section('content')
<div class="btn-group-lg">
  <button type="button" id="button1">　１　</button>
  <button type="button" id="button2">　２　</button>
</div>
@endsection


<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>hobby</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    
    </script>
    <script type="text/javascript" src="/js/ajax.js"></script>
    <link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/styles.css">
  </head>
  <body>
    @yield('content')
  </body>
</html>

ajax.js


(function(){
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    const pi = 3.14;

    $('#button1').click(function(){
        $.post("{{ url('/post/ajax') }}", {pi: pi},
            function(response){
                alert("戻り値は" + response + "です");
        });
    });

    $('#button2').click(function(){
        $.ajax({
            type: "POST",
            url: "{{ url('/post/ajax') }}",
            data: {pi: pi},
            dataType: 'json',
            timeout: 10000,
            success: function(response){
                alert("戻り値は" + response + "です");
            }
        });
    });
})();

Controller

use Illuminate\Http\Request;


/**
 * 3.14 × 1~100の間の乱数を返す
 * @param Request $request
 * @return float|int
 */
public function returnRandomNumber(Request $request)
{
    return $request->pi * mt_rand(1, 100);
}

前々から思っていました

ajaxという響きがかっこいいです

javascriptのフレームワークもそのうち挑戦してみたいです