Question

enter image description here

快速参考我附上了我想要的图像。我想更新（更改内容）而不更新整个页面（不刷新页面）。单击白盒上的链接或按钮应该从数据库中获取数据并将其显示在红色框中。当然，你要写的第一件事就是“Ajax !!!”，但是因为我是laravel framework的新手，我想知道实现这个目标的最佳方法是什么，我应该写{ {1}}直接在视图或控制器中，以及如何通过控制器进行操作？如果您需要更多信息，请告诉我。

修改过的问题，除了答案之外还有其他更好的方式吗

Answer 1

首先我们需要设置一些路线。您也可以使用控制器执行此操作。

Route::get('home', function()
{
    return View::make('home');
});

Route::get('someRoute', function()
{
    return View::make('someView');
});

对于主视图，我将添加一个脚本部分：

//home.php

<html>
<head>
    <script>
    $('a.ajax').click(function(e){
        e.preventDefault();
        var pageURL = $(this).attr('href');
        $('#ajaxContent').load(pageURL);
    });
    </script>
</head>
<body>
    <div class="wrapper">
        <a href="{{URL::to('someRoute')}}" class="ajax">Click Here</a>
        <div id="ajaxContent"></div>
    </div>
</body>
</html>

如果你正在使用刀片模板，这是一个实现

//main.blade.php

<html>
<head>
    @yield('styles')
</head>
<body>
    <div class="wrapper">
        @yield('content')
    </div>
    @section('scripts')
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    @show
</body>
</html>

//home.blade.php
@extends('main')

@section('content')
    <a href="<?=URL::to('someRoute')?>" class="ajax">Click Here</a>
        <div id="ajaxContent"></div>
@stop

@section('scripts')
    @parent
    $('a.ajax').click(function(e){
    e.preventDefault();
    var pageURL = $(this).attr('href');
    $('#ajaxContent').load(pageURL);
    });
@stop

Answer 2

如果您使用jQuery使用ajax功能执行此更新，那么对您来说会更好。一个简单的代码可以像这样

$('a.ajax').click(function(e){
     e.preventDefault();
     var pageURL = $(this).attr('href');
     $('#divID-to-be-updated').load(pageURL);
});

可以从http://jqapi.com/#p=load

中读取有关jQuery中的ajax功能的更多信息

更新网页的某些部分？

2 个答案: