Laravel中使用AJAX动态刷新部分页面

最新推荐文章于 2021-01-11 14:36:14 发布

EagleMaze

最新推荐文章于 2021-01-11 14:36:14 发布

阅读量9.3k

点赞数 1

分类专栏： Laravel PHP jquery javascript 文章标签： laravel ajax javascript jquery 动态刷新

本文链接：https://blog.csdn.net/lgyaxx/article/details/69525469

版权

本文介绍了如何在Laravel框架下，结合jQuery使用AJAX动态刷新页面部分内容。通过创建AJAX请求，调用Controller并返回HTML片段，再将其插入到页面中，实现添加和删除茶叶消耗记录的动态模块。重点讲述了设置CSRF token、定义路由、编写Controller函数以及处理AJAX回调的方法。

摘要由CSDN通过智能技术生成

AJAX相信大家都不陌生，有很多不同的Javascript Frameworks可以用来快速实现AJAX功能。那么今天我们一起来看一下如何在使用了PHP Frameworks的网站中使用AJAX来刷新页面的一小部分。

这里我使用的是jQuery + Laravel（当然如果使用了其他框架，基本的概念也是不变的）。如图，假设我们制作了一个页面来管理客户的茶叶消耗：
tea consumption block

我们想制作一个模块来动态为每一个新的茶叶消耗增加一个消耗选择区，即点击新增消耗后，会动态增加一个新的茶叶消耗区域：
add tea consumption dynamically

另外，当点击删除该消耗时，该消耗区域会动态删除。

要实现这样的功能，我们的基本思路如下（MVC Pattern）：

使用AJAX POST call来调用Controller的函数

Controller返回我们所需的View中的HTML代码片段

调用AJAX callback函数动态将HTML代码片段插入到页面中

那么首先我们先创建我们的js文件，在这里我新建了一个叫my-ajax-add-tea-consumption.js的文件，并放在了/public/js文件夹中。我们在view模板中使用<script></script>调用：

<!DOCTYPE html>
<html lang="en">
...
<body>
...
    <input type="hidden" name="order_id" value="{
   { $order->id }}">
    <div class="tea-consumption">

最低0.47元/天解锁文章

EagleMaze

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Laravel中使用AJAX动态刷新部分页面

AJAX相信大家都不陌生，有很多不同的Javascript Frameworks可以用来快速实现AJAX功能。那么今天我们一起来看一下如何在使用了PHP Frameworks的网站中使用AJAX来刷新页面的一小部分。这里我使用的是jQuery + Laravel（当然如果使用了其他框架，基本的概念也是不变的）。如图，假设我们制作了一个页面来管理客户的茶叶消耗：我们想制作一个模块来动态为每一个新的
复制链接

扫一扫