Laravel：使用 ajax 和多个控制器@action 更改 div答案

【问题标题】：Laravel: Change the div with ajax and multiple controller@actionLaravel：使用 ajax 和多个控制器@action 更改 div
【发布时间】：2018-04-15 08:52:48
【问题描述】：

我想用AJAX 更改div 的内容（我不想在单击链接时重新加载所有页面），我找到了一些文档，但我只看到“静态”解决方案（它们是“硬编码”的，即“如果你点击这个，就会带来这个”，但我不想在我的项目底部使用 3000 行开关盒）。

有人可以向我展示一个“动态”解决方案，我只需将控制器、操作和参数提供给点击按钮，jquery 路由器无需修改即可进行路由？

我的示例代码：

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
    <head>
        @include('includes.head')
    </head>
    <body>
        <div id="header">
         <nav id="navbar" class="navbar navbar-default">
           <ul class="nav nav-tabs navbar-right">
                <li>
                    <a action="FirstExampleController@firstExamle" params="[a => 24, b => 52]">
                        <button type="button" class="btn btn-link">First Example</button>
                    </a>
                </li>
                <li>
                    <a action="SecondExampleController@secondExamle" params="[id => 1, newValue => 42]">
                        <button type="button" class="btn btn-link">Second Example</button>
                    </a>
                </li>
         </nav>
        </div
        <div id="app">
            <!-- This will be changed by the router -->
        </div>
        <footer class="container navbar">
            @include('includes.footer')
        </footer>

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

控制器动作

class FirstExampleController extends Controller{

    public function firstExample(Request $request){
        $a = $request -> a;
        $b = $request -> b;

        $c = $a + $b;

        return $c;
    }
}

class SecondExampleController extends Controller{

    public function secondExample(Request $request){
        $id = $request -> id;
        $newValue = $request -> newValue;

        //database operation where the id's object's new value will be $newValue

        return $this->showItems;
    }
}

【问题讨论】：

标签： php ajax laravel laravel-5.5

【解决方案1】：

这样做，

首先在每个button 以及<a> 内的链接上添加一个id，您可以将其用作ajax 的选择器，并为params 使用data-* 属性，您可以阅读更多关于数据属性here

 $('#buttonID').click(function(e) {  // e=event
        e.preventDefault();
        var param1 = $(this).data("param1")
        var param2 = $(this).data("param2")
        // so on....
        $.ajax({
           url: "/routeNames",
           type: "GET"/"POST",
           data: { data1: param1, data2: param2 }, 
           success: function(response) {
           console.log(response);  
    }
   });
});

注意：您无需像这样指定SecondExampleController@secondExample，而是使用routes 阅读更多关于routes 的信息，只需指定路由名称或路由的URI。 p>

PS：这只是一个基本结构。您需要进行研发才能充分利用它。

【讨论】：

研发是什么意思？我有一些观点，其中有很多链接/按钮。有没有机会只包含一次这个 jQuery 脚本？
不，因为参数会因您的不同请求而有所不同，因此如果您想制作脚本并包含它，您需要维护所有这些情况。如果你不拘泥于需求，那么你可以使用 vue、react 或 angular js 来满足你的需求。
如果您对我的回答感到满意，您可以接受；）