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

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