我想使用更改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;
}
}
这样子做
首先，id在每个button链接以及每个链接上添加一个<a>，您可以在其中用作选择器ajax并使用data-*属性，以便在此处params阅读有关数据属性的更多信息
$('#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有关路由的更多信息，而只需指定路由的名称或URI即可。
PS：这只是一个基本结构。您需要进行研发以获得最佳效果。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句