Ajax Post 请求在 Laravel 中被调用两次

时间:2021-03-01 15:48:27

标签: ajax laravel

我正在为这个问题搜索 stackoverflow,但没有一个奏效。我的刀片模板中有一个订阅按钮,它在我的 ajax 代码中显示如下:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="flash-message"></div>
            <div class="card">
                <div class="card-header">
                    <div class="level">
                        <span class="flex"><a href="{{route('profile',$thread->creator->name)}}">{{$thread->creator->name}}</a> posted:
                            {{$thread->title}}
                        </span>
                        @if(auth()->check())
                        @if($subscription)
                        <button class="btn btn-secondary" id="unsubscribe">Unsubscribe</button>
                        @else
                        <button class="btn btn-danger" id="subscribe">Subscribe</button>
                        @endif
                        @endif
                        @can('update',$thread)
                        <a href="{{$thread->path()}}/edit" class="btn btn-link">Edit Thread</a>
                        <form action="{{$thread->path()}}" method="POST">
                            @csrf
                            @method('delete')
                            <button class="btn btn-link" type="submit">Delete Thread</button>
                        </form>
                        @endcan
                    </div>
                </div>
                <div class="card-body">
                {{$thread->body}}
                </div>
            </div>
            @foreach($replies as $reply)
             @include('threads.reply')
            @endforeach
            <div class="mt-5">
                {{$replies->links()}}
            </div>
            @if(auth()->check())
            <form method="POST" action="{{$thread->path() . '/replies'}}">
               @csrf
               <div class="form-group mt-2">
                   <textarea class="form-control @error('body') is-invalid @enderror" name="body" id="body" rows="5" placeholder="Write a reply"></textarea>
                   @error('body')
                    <div class="alert alert-danger">{{ $message }}</div>
                    @enderror
               </div>     
               <div class="d-flex justify-content-between">
                   <button type="submit" class="btn btn-dark">Post</button>        
                    <i class="fas fa-share pr-4">Share:</i>      
               </div>  
               <div class="d-flex justify-content-end ">
                <a href="https://www.facebook.com/sharer/sharer.php?u={{url()->current()}}" target="_blank"><span class="fab fa-facebook-square fa-3x pr-2" style="color:#3b5998"></span></a>
                <a href="https://twitter.com/intent/tweet?url={{url()->current()}}" target="_blank"><span class="fab fa-twitter fa-3x pr-2" style="color:#00acee"></span></a>
                <a href="https://wa.me/?text={{url()->current()}}" target="_blank" ><span class="fab fa-whatsapp-square fa-3x" style="color:#4FCE5D"></span></a>
               </div>
            </form>      
             @else   
             <p>Please <a href="{{route('login')}}">sign in</a> to participate in the forum</p> 
            @endif
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <p>
                        This thread was posted {{$thread->created_at->diffForHumans()}}
                        by <a href="#">{{$thread->creator->name}}</a>
                        and has {{$thread->replies_count}} {{Str::plural('comment',$thread->replies_count)}}
                    </p>
                </div>
            </div>
        </div>
    </div>  
</div>

<script type="application/javascript">

    $(document).ready(function(){
        $('#subscribe').click(function(e){
            e.preventDefault();
            $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  }
              });
            $.ajax({
                url: "{{route('subscription.store')}}",
                method:'POST',
                data: {
                    thread_id: "{{$thread->id}}",
                },
                success:function(response){
                    $('div.flash-message').html(response);
                },
                error:function(error){
                    console.log(error);
                }
            });
        });
    });

</script>
@endsection

这是我的订阅控制器:

  public function store(Request $request){
        
        $subscription = Subscription::create([
            'thread_id' => $request->thread_id,
            'user_id' => auth()->id()
        ]);

        Session::flash('success', 'You have subscribed to this thread');
        return view('partials.flash-messages')->render();
    }

当我点击订阅时应该发生的事情是我将点击商店控制器并在我的订阅表中创建一个新记录。单击它后,我发现在我的网络选项卡(开发工具)上两次调用了 post 请求,没有出现错误等,并发现有两条相同的记录被插入到我的表中。

我可能忽略了某些东西,但找不到我的错误。我该如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

我怀疑您看到了 2 个请求,一个是 OPTIONS 动词,另一个是 POST 动词。这对于 POST 操作是正常的。

如果您没有收到响应,我会检查 VerifyCSRF 中间件,也许会临时将路由添加到异常中,然后调试您的 XSRF 令牌。