bertvthul/simplexhr

为 Laravel 简化 xhr 请求

安装次数: 1,323

依赖项: 0

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 0

开放问题: 0

语言:JavaScript

dev-master 2022-09-08 12:03 UTC

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)。