AJAX 和 Laravel - 在模式“意外标识符”上动态加载数据

Question

我正在尝试使用 ajax 在引导模式上动态加载数据，但我无法让它发挥作用。我做了一些研究，我看过一些视频，但我仍然做不到。我希望有人可以帮助我

                  <ul>
                  @foreach ($rs as $r)
                    <li><button class="viewData" value="view" id="{{$r->id}}">{{$r->title}}</button></li>
                  @endforeach
                  </ul>

这是我的物品

  <div class="portfolio-modal modal fade" id="projectView" role="dialog" tabindex="-1" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content" id="modal-content">
                  <div class="close-modal" data-dismiss="modal" data-remodal-action="close">
                      <div class="lr">
                          <div class="rl">
                          </div>
                      </div>
                  </div>
                      <div class="row">
                        <div class="col-lg-12">
                          <div class="modal-body" id="project-content">
                            <!-- CONTENT HERE -->
                          </div>
                        </div>
                     </div>
                  </div>
              </div>
            </div>

这是我的模态，我想在其中详细显示我的项目

更新： 我更新了我的 js 文件，现在我试图在模态中打印我的对象的内容，但它给了我这个错误“意外的标识符”

 $(document).ready(function(){

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


   $('.viewData').click(function(){
     var project_id = $(this).attr("id");


     $.ajax({
   url:"/data",
   method:"POST",
   data:{'project_id' : project_id},

   success:function(data){
     var htmlString = "";

     htmlString += "<h3 class="text-center">" + data.title + "</h3>";

     $('#project-content').html(htmlString);
     console.log(data);
     $('#projectView').modal("show");
   }
 });

   });

});

这是我传递项目 ID 的 js 文件

  public function dataToModal(Request $request) {

  if(!empty($request)){
    $id = $request->project_id;
    $project = content::FindOrFail($id);

    return  Response::json($project);

 } else {
  return 'asa';
}

}

这只是我为测试此功能而创建的一个项目，当它工作时，我将在主站点上实现它。有人可以帮助我吗？欢迎任何帮助和建议！

提前谢谢你。

Answer 1

你可以试试这个代码：

JavaScript：

$(document).ready(function(){
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
   $('.viewData').click(function(){
     var project_id = $(this).attr("id");

     $.ajax({
       url:"/data",
       method:"POST",
       data: {project_id : project_id},
       success:function(data){
         $('#project-content').html(data);
         console.log(data);
         $('#projectView').modal("show");
       }
     });
   });
});

控制器：

public function dataToModal(Request $request) {
 if(!empty($request)){
   $data = $request->all();
   //print_r($request->all());
   return $data;
 } else {
    return 'asa';
 }
}