Question

当用户单击导航项时，div内的内容需要根据单击的项进行异步更改，但是我不想为每个项选项提供路由

例如：

function openDialog() {
    $("#somediv").dialog({
        modal: true,
        width: 500, // or you can have it in %
        height: 400, // or you can have it in %
        position: { my: "left top", at: "left bottom", of: window }
    });
}

用户点击第一项

<ul>
   <li id="divContentOne"> (each id has the same name of the view, so 
 the first li has to load divContentOne.blade.php)
   </li>
 ...
 ...
 a lot of li
 ...
</ul>

<div id="toload">

</div>

运行异步功能

我的想法是将ID传递给控制器conc（id。'blade.php'），并以某种方式返回所需的视图

如果你们还有其他解决方案，请告诉我，谢谢

我在邮寄方式上有些挣扎，我得到了419（未知状态）

我现在的代码：

 <script> ul.addEventListener('click', function(e) {
    Id =  e.target.id;
            asyncFunc();
          });
 </script>

我的路线：

const reportsMenuBlock = document.getElementsByClassName('reports-menu- 
block');
const reportWrapper = document.getElementById('report-wrapper');

//async function

function makeRequest() {
  const token = document.querySelector('meta[name="csrf-token"]').content;
  url = '/reports/asyncPost';

  fetch(url,{
    method: 'POST',
    credentials: 'omit',
    mode: 'same-origin',
    headers:{
        "Content-Type": "application/json; charset=utf-8",
        "X-CSRF-TOKEN": token
    },
    body: JSON.stringify(reportId)
    });
  } 



// take the id of the item menu clicked and calls the async function

for(i = 0; i < reportsMenuBlock.length; i++){
 reportsMenuBlock[i].addEventListener('click', function(e) {
    reportId =  e.target.id;
    makeRequest();
});
};

我的控制器：

Route::post('/reports/asyncPost', 'ViewController@asyncReports')- 
>name('asyncReports');

传递js变量以设置必须加载哪个视图（刀片组件）

0 个答案: