bertvthul / simplexhr
为 Laravel 简化 xhr 请求
dev-master
2022-09-08 12:03 UTC
Requires
- php: ^7.0|^8.0
This package is auto-updated.
Last update: 2024-09-08 16:21:24 UTC
README
此包提供了一种方法,可以让您的 Laravel 应用中的 XHR 请求变得简单。
<span class="btn" data-simplexhr="Product.addToCart" data-values="{'id': 1}">Order</span>
在示例代码中的 data-simplexhr
中,提供要调用的控制器名称和函数名称。可以使用 data-values
在请求中提供值。当添加到表单中时,表单中的所有值都会自动发送。
安装
您可以通过 composer 安装此包
composer require bertvthul/simplexhr
将服务提供者添加到 config\app.php
中的 providers 数组中;
Bertvthul\Simplexhr\SimplexhrServiceProvider::class,
并确保通过添加以下内容到您的 app.js 中来加载 js:
require('./../../vendor/bertvthul/simplexhr/src/js/simplexhr.js');
用法
在您的 blade 文件中,将 data-simplexhr="Controller.function"
添加到可点击的元素或表单中。您需要提供控制器和函数,用点分隔。
<span class="btn" data-simplexhr="Product.addToCart" data-values="{'id': 1}">Order</span>
使用 data-values
在请求中发送变量。
您还可以将其添加到表单中
<form data-simplexhr="Product.addToCart" onchange> <input type="text" name="count"> <input type="hidden" name="object" value="1"> </form>
您可以使用隐藏字段提供额外数据。 onchange
表示表单在任何更改时提交。移除 onchange
以仅在提交时发送表单。
在您的控制器中的函数中,您可以执行以下操作;
public function addToCart(Request $request) { session(['Product.cart.'.$request->input('object') => $request->input('count')]); $response = [ 'msg' => 'Item added to your cart!', 'html' => [ '#book-btn' => view('product.bookbutton')->render(), '#cart-items' => view('cart.items')->render(), ], ]; return response()->json($response); }
HTML 响应由包处理。键是要替换的 HTML 元素,值是要替换的内容。您还可以在键上使用 :append 或 :prepend
'html' => [ '#blog-items:append' => view('blog.items')->withItems($items)->render(), ],
您可以返回任何您喜欢的内容。如果存在,脚本会调用 js 函数 xhrCustomCallback
。您可以处理其他 JSON 响应,如响应后的消息显示
$.xhrCustomCallback = function(data) { if ('msg' in data) { $('#toast').find('.toast-body').html(data.msg); $('#toast').toast('show'); } }
配置
发布配置以进行本地更改
php artisan vendor:publish --provider=Bertvthul\Simplexhr\SimplexhrServiceProvider
配置具有以下设置
- middleware:默认为 "web"
许可证
MIT 许可证 (MIT)。