Question

我想用div更改AJAX的内容（我不想在点击链接时重新加载所有页面），我找到了一些文档，但我只是看到“静态”解决方案（它们是“硬编码”，“如果你点击它就会带来这个”，但我不想在项目的底部使用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;
    }
}

Answer 1

这样做，

首先为每个id以及button内的链接添加<a>，您可以将其用作ajax的选择器并使用data-* } params的属性，您可以阅读有关数据属性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。

PS：这只是一个基本结构。你需要做R＆amp; D以获得最佳效果。

Laravel：使用ajax和多个控制器@动作更改div

1 个答案: