Ajax 返回 GET 请求而不是 POST

Question

我正在尝试在 Laravel 中创建一个个人消息系统，该系统的一部分是能够以表单形式发送消息，而无需刷新整个页面。我一直在关注一些 youtube 教程，这是我迄今为止的 Ajax 脚本。<form id="form{{$dm->id}}">                    {{ csrf_field() }}                    <input id="message" placeholder="Send a message" style="border-radius: 0px;" type="username" class="form-control" name="message">                    <script>                    $('form{{$dm->id}}').ready(function (){                                            $('form{{$dm->id}}').on('submit', function( event ) {                        event.preventDefault();                        $.ajax({                            type: 'post',                            url: '{{ route("sendMessage", $dm->id) }}',                            data: $('form{{$dm->id}}').serialize(),                             success: function(response){                                alert('suces')                            },                            error: function(response){                               alert('failure')                            }                        });                    });                    });                    </script>                </form>它不向控制器发送 POST 请求，而是发送 GET 请求并进行重定向。这是我第一次使用 Ajax/Javascript，所以我不知道为什么它不起作用。控制器脚本：public function sendM(Request $request, $id){    $validatedData = $request->validate([        'message' => 'required|string|max:255|min:4',    ]);        $dm = Dm::find($id);    $mess = new Message;    $mess->Authid = Auth::user()->id;    $mess->Userid = $dm->Userid;    $mess->Dmid = $dm->id;    $mess->message = $request->input('message');    $dm->messages()->save($mess);    $dm->touch();}路由入口：Route::post('/sendmessage/id{id}', 'SettingsController@sendM')->name('sendMessage')->middleware('verified');很感谢任何形式的帮助！（注：抱歉，如果这是非常明显的事情）

Answer 1

方法的别名。如果您使用 1.9.0 之前的 jQuery 版本，则应该使用 type。

             <form id="form{{$dm->id}}">

                    {{ csrf_field() }}

                    <input id="message" placeholder="Send a message" style="border-radius: 0px;" type="username" class="form-control" name="message">

                    <script>

                    $('form{{$dm->id}}').ready(function (){

                        

                    $('form{{$dm->id}}').on('submit', function( event ) {

                        event.preventDefault();

                        $.ajax({

                            type: 'POST', //Check your JQ version.

                            method: 'POST', //Check your JQ version.

                            contentType:"multipart/form-data; charset=utf-8",

                            //url: '{{ route("sendMessage", $dm->id) }}',

                            url: '{{ route("sendmessage", $dm->id) }}',

                            data: $('form{{$dm->id}}').serialize(), 

                            success: function(response){

                                alert('suces')

                            },

                            error: function(response){

                               alert('failure')

                            }

                        });

                    });

                    });

                    </script>

                </form>

Answer 2

不确定它是否解决了您的问题，但您还必须将 csrf 令牌添加到标头中：

$.ajaxSetup({

   headers: {

      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

   }

});

（当然，如果令牌位于元标记中）

Answer 3

在 $.ajax 调用中，您需要将方法设置为 post 而不是类型。

$.ajax({

        method: 'post',

        url: '{{ route("sendMessage", $dm->id) }}',

        data: $('form{{$dm->id}}').serialize(), 

        success: function(response){

          alert('suces')

        },

        error: function(response){

        alert('failure')

        }

       });

顺便说一句，jquery 通常被认为正在被淘汰。您可能想了解 jquery 的一些替代方案，例如 vue.js 或 React。具体到ajax方面，Laravel内置了axios支持。