按一下 Delete 按钮,我们可以使用 Ajax 的形式请求删除指定的内容资源 .. 在这个删除按钮上可以再添加点东西 .. 先添加一个 id .. 值可以是 delete ,一会儿可以用这个 id 定位到这个元素 .. 然后监听这个按钮的点击事件 .
删除请求需要用到 csrfToken .. 可以把它放在一个自定义的 data 属性里面 .. 添加一个 data-csrf .. 绑定一个 csrfToken ..
下面再添加一个 data-id .. 绑定一个 post.id ...
然后打开页面使用的自定义的脚本 .. 在 public 下面,找到这个 main.js .. 里面添加一个立即执行的函数 .. 在它里面可以放一些自定义的脚本 ..
先添加一个 deleteButton .. 用 jQuery 找到页面上带 delete 这个 id 的元素 ..
下面监听一下这个按钮的点击事件 .. deleteButton 用一下 click 这个方法 .. 一个函数参数 .. 里面可以先得到在删除按钮上的 id 还有 csrf 这两个自定义 data 属性的值 ..
const id ,它的值用一下 deleteButton 的 data 方法,得到 id 这个 data 属性的值 .. 下面再添加一个 _csrf ..用一下 deleteButton 的 data 方法 .. 要得到的是 csrf 这个 data 属性的值 ..
然后再发起一个 ajax 请求 .. $.ajax .. 一个配置对象参数 .. url 设置一下请求的地址 .. 这里应该就是 /posts/ 后面加上要删除的内容资源的 id 号 ..
method ,请求用的方法应该设置成 DELETE ..
再添加一个 data 属性 .. 请求里面要包含一个 _csrf 数据 .. 我们的框架会对 DELETE 类型的请求做 csrf 保护 ..
请求成功会调用 success 方法 .. 添加一个这样的方法 .. 得到的响应是 response .. 在控制台上可以输出这个 response 的值 ..
控制器
打开控制器 .. 找到 destroy 方法,前面配置好的删除内容资源的请求会使用这个方法来处理 .. 可以把 request .. 还有 params 解构出来 ..
然后用一下 await,等待执行结果 . Database .. table 是 posts .. where 设置条件 .. 要删除的内容资源的 id 的值应该是 params 里面的 id 这个参数的值 ..
再用一下 delete .. 删除掉这个内容资源 ..
完成以后,再 return 一个 success .. 这个是给请求的一个响应 ..
实验
回到浏览器,可以再试一下 .. 按一下这个内容资源页面上的 Delete 按钮 .. 会请求删除资源 .. 成功以后,会在控制台上输出一个 success ..
再刷新一下这个内容资源页面 .. 上面显示标题还有正文的地方现在都会显示 undefined ... 因为我们已经把当前请求显示的这个 id 号的内容资源给删除掉了 ..
可以再到数据库客户端这里再确定一下 .. 查看一下 posts 表里的数据记录 ..
最开始我们插入到这个表里的那条数据记录现在已经被删除掉了 ..