Php 如何在Laravel6中使用ajax更新（放置）而不刷新？

我正在尝试使用ajax更新数据，而不必每次都刷新页面。我过去没有真正使用过ajax，所以这对我来说是非常新的。我已经从我看到的例子中尝试了一些不同的方法，这就是我现在可以总结的

目前，它给了我一个错误

此路由不支持PUT方法。

并且上面的url保持不变

这是我目前尝试的：

刀片

<div class="table">
  <div class="tr">
      <span class="td">Name</span>
      <span class="td">New cases</span>
      <span class="td">cases</span>
      <span class="td">deaths</span>
      <span class="td">recoveries</span>
      <span class="td">Submit</span>
    </div>

        @foreach($data as $dat)
        <form class="tr" id="form{{$dat->id}}">
          <input type="hidden" value="{{ csrf_token() }}" id="csrf_token" />
          <input type="hidden" name="id" value="{{$dat->id}}">
          @method('put')
          <span class="td"><input type="text" name="name" value="{{$dat->country_name}}"/></span>
          <span class="td"><input type="text" name="nCases" value="{{$dat->new_cases}}"/></span>
          <span class="td"><input type="text" name="cases" value="{{$dat->cases}}"/></span>
          <span class="td"><input type="text" name="deaths" value="{{$dat->deaths}}"/></span>
          <span class="td"><input type="text" name="recoveries" value="{{$dat->recoveries}}"/></span>
          <span class="td"><input type="submit" name="submit" value="Submit"/></span>
        </form>
        @endforeach
</div>

路线

Route::put('/ajaxtest', 'CountriesController@ajaxTest');

好的，您的刀片服务器中有

@method（“put”）

，因此当您序列化表单时，此输入值已经存在于您的数据中：

// serialized data looks like
{
    ...
    "_method": "put"
}

您只需将ajax类型从

put

更改为

post

，这会有所帮助

此外，您不必在每个表单中都有

@csrf

，只需为页面输入一个输入，并将其值设置为ajax标题即可

// in blade
<input type="hidden" value="{{ csrf_token() }}" id="csrf_token" />

// in js
$('form').submit(function( event ) {
event.preventDefault();
let token = $("#csrf_token").val();
$.ajax({
    action: {{url("/ajaxtest")}},
    type: 'post', // CHANGE this line from put to post
    headers: { 'X-CSRF-TOKEN': token }, // ADD token to headers
    data: $(this).serialize(), // serialize the form submitted
    dataType: 'json',
    success: function(response){
        console.log(response);
    },
    error: function( _response ){
        // Handle error
    }
});

//在刀片服务器中
//在js中
$（'form'）。提交（函数（事件）{
event.preventDefault（）；
let token=$（“#csrf_token”）.val（）；
$.ajax({
操作：{{url（“/ajaxtest”）}，
键入：“post”，//将此行从put更改为post
标头：{'X-CSRF-TOKEN'：TOKEN}，//将TOKEN添加到标头
数据：$（this）.serialize（），//序列化提交的表单
数据类型：“json”，
成功：功能（响应）{
控制台日志（响应）；
},
错误：函数（\u响应）{
//处理错误
}
});

---

}))

你的路线呢？@RubenDanielyan也添加了路线。嗨，谢谢你的回复。我已经尝试了你的建议，但出于某种原因，每当我在表单上单击submit时，它仍然希望重新加载我的页面，并且控制台中根本没有显示任何内容。您知道这是为什么吗？请尝试在enent.preventDefault（）之后添加event.stopPropagation（），以便立即解决该问题。当我点击submit并检查控制台时，它确实给了我

POST 405（不允许使用方法）

发现了问题，出于某种原因，每当我将路由重定向到控制器时，它会给我一个500错误，但当我在路由中应用它时，它会返回“一些数据”，您现在是否通过ajax put请求访问了您的方法？

// serialized data looks like
{
    ...
    "_method": "put"
}

// in blade
<input type="hidden" value="{{ csrf_token() }}" id="csrf_token" />

// in js
$('form').submit(function( event ) {
event.preventDefault();
let token = $("#csrf_token").val();
$.ajax({
    action: {{url("/ajaxtest")}},
    type: 'post', // CHANGE this line from put to post
    headers: { 'X-CSRF-TOKEN': token }, // ADD token to headers
    data: $(this).serialize(), // serialize the form submitted
    dataType: 'json',
    success: function(response){
        console.log(response);
    },
    error: function( _response ){
        // Handle error
    }
});