AJAX相信大家都不陌生,有很多不同的Javascript Frameworks可以用来快速实现AJAX功能。那么今天我们一起来看一下如何在使用了PHP Frameworks的网站中使用AJAX来刷新页面的一小部分。
这里我使用的是jQuery + Laravel(当然如果使用了其他框架,基本的概念也是不变的)。如图,假设我们制作了一个页面来管理客户的茶叶消耗:
我们想制作一个模块来动态为每一个新的茶叶消耗增加一个消耗选择区,即点击新增消耗后,会动态增加一个新的茶叶消耗区域:
另外,当点击删除该消耗时,该消耗区域会动态删除。
要实现这样的功能,我们的基本思路如下(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">