如何使用 ajax 将特定用户或事件的数据成功加载到 laravel 中的引导模式中？

Question

我正在尝试将事件数据加载到 laravel 中的引导模式中，但它对我不起作用，因为我刚开始使用 ajax。请检查我做了什么

模态模板

<div class="modal fade" id="readmore" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Event Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <!-- Read More Event-->
      
      <div class="content">
        <form>
@csrf
          <div class="form-group">
            <input type="text" name="" value="{!! $edit_event-> title !!}" class="form-control">
          </div>
          <div class="form-group">
            <input type="text" name="" value="{!! $edit_event-> deadline !!}" class="form-control">
          </div>
          <div class="form-group">
            <textarea class="form-control">{{$edit_event-> message}}</textarea>
          </div>

        </form>
        
      </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

按钮

<button data-toggle="modal" title="Edit" class="eventinfo" data-id="{{ $msg->id }}" data-token="{{ csrf_token() }}"><i class="fa fa-pencil-square-o"></i>Edit</button>

Ajax 或脚本

<script type="text/javascript">
    $(".eventinfo").click(function(){
            var id = $(this).data("id");
            var token = $(this).data("token");
            $.ajax(
            {
                url: "/event/edit/"+id,
                type: 'post',
                dataType: "JSON",
                data: {
                    "id": id,
                    "_method": 'POST',
                    "_token": token,
                },
                success: function (response)
                {
                    $('.modal-body').html(response);
                    $('#exampleModal').modal('show');

                }
            });

            console.log("It failed");
            alert('failed');
        });

</script>

路线

Route::get('/event/edit/{id}', 'EventController@edit');

Controller

public function edit($id){
            $edit_event = Event::findOrfail($id);

            if ($new_event) {
                return response()->json(['edit_event'=> $edit_event,
            ]);
            } else {
                return response()->json(['status'=> 'error']);
            }



       }

请大家帮忙go一下怎么样？ 我想使用 Laravel 将数据加载到引导模式中。谢谢

Answer 1

您的代码中出现了很多错误：

使用{!! $someVar !!} {!! $someVar !!} 。 所以尽量避免它在任何情况下。 还有可用的@json助手，您可以像<span id='@json($myId)'>一样使用它。 有关详细信息，请参阅https://laravel.com/docs/7.x/blade 。
对于成功和错误情况，您的 controller 都返回状态200 。 这是任何 API 的反模式。controller 中的$new_event参数也丢失了（未定义）。
您可以通过添加自动X-CSRF-TOKEN header 来简化您的 jQuery AJAX 调用，如下所示：


$(document).ready(function() {
    // Add CSRF token header on every ajax request.
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
});

在你的根模板中，然后简单地添加<meta name="csrf-token" content="{{ csrf_token() }}">在你的<head>和$.ajaxSetup function 应该自动为你添加正确的 CSRF 令牌每个 ajax 请求。 HTTP header X-CSRF-TOKEN被 Laravel 自动识别（它与在 POST 请求正文中发送_token参数具有相同的 function）。

你的alert('failed'); line 将始终被调用，没有return语句，也不会将其置于任何类型的失败回调中。
在您的 ajax success回调中引入了一个可能的错误，因为您正在设置$('.modal-body')内容，这将为具有此 class 的所有元素设置内容。

我建议您开始调试 javascript function 并查看是否正在调用您的点击处理程序。 还要检查浏览器的 .network 选项卡，看看 ajax 请求是否正确执行。

如何使用 ajax 将特定用户或事件的数据成功加载到 laravel 中的引导模式中？

问题描述

1 个解决方案

解决方案1
0 2020-07-28 21:54:39

如何使用 ajax 将特定用户或事件的数据成功加载到 laravel 中的引导模式中？

问题描述

1 个解决方案

解决方案1 0 2020-07-28 21:54:39

解决方案1
0 2020-07-28 21:54:39