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

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

$.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 支持。

Answer 2

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

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

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

Answer 3

方法的别名。如果您使用的是 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>