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而不是类型。

$.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

方法的别名。如果您使用的是jQuery 1.9.0之前的版本，则应使用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>

Ajax返回GET请求而不是POST

3 个答案: