ajax - 更新网页的某些部分？-6ren

ajax - 更新网页的某些部分？

转载作者：行者123 更新时间：2023-12-01 02:25:05

27

4

enter image description here

为了快速引用，我附上了我想要的图片。
我想更新(更改内容)而不更新整个页面(不刷新页面)。单击白框上的链接或按钮应从数据库中获取数据并将其显示在红框中。当然，你会写的第一件事是“Ajax !!!”，但因为我是新来的 laravel framework ，我想知道实现这一点的最佳方法是什么，我应该写javascript直接在 View 或 Controller 中，如何通过 Controller 来做？如果您需要更多信息，请告诉我。

修改后的问题，除了回答的问题之外还有其他更好的方法

最佳答案

首先我们需要设置一些路由。您也可以使用 Controller 执行此操作。

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

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

对于主 View ，我会添加一个脚本部分:

//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>

如果您使用 Blade 模板，这里有一个实现

//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

关于ajax - 更新网页的某些部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17134990/

27

4

0

文章推荐： javascript - ajax 加载后再次运行 jQuery 就绪 block 吗？

文章推荐： jquery - 延迟悬停法

文章推荐： .net - TeamCity - Nuget 包恢复和 RequireConsent

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

ajax - 更新网页的某些部分？