alpinejs-requests
Version:
Inline HTTP requests made simple for Alpine.js
75 lines (60 loc) • 1.95 kB
HTML
<!DOCTYPE html>
<html>
<head>
<script defer src="../dist/plugin.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js"></script>
</head>
<body>
<h1>Request</h1>
<div x-data="{text: 'Make Request'}">
<button
type="button"
@click="text = 'Sending Request'"
@request="text = 'Request Sent'"
x-request="{route: 'index.html', method: 'PUT'}"
x-text="text"
></button>
</div>
<div x-data="{text: 'Make Request (Magic Style)'}">
<button
@click="$request({route: 'index.html', method: 'PUT'}); text = 'Sending Request';"
@request="text = 'Request Sent'"
x-text="text"
></button>
</div>
<h1>GET</h1>
<div x-data="{text: 'Make GET Request'}">
<button
type="button"
@click="text = 'Sending GET Request'"
@get="text = 'GET Request Sent'"
x-get="index.html"
x-text="text"
></button>
</div>
<div x-data="{text: 'Make GET Request (Magic Style)'}">
<button
@click="$post({route: 'index.html', method: 'GET'}); text = 'Sending GET Request';"
@get="text = 'GET Request Sent'"
x-text="text"
></button>
</div>
<h1>POST</h1>
<div x-data="{text: 'Make POST Request'}">
<button
type="button"
@click="text = 'Sending POST Request'"
@post="text = 'POST Request Sent'"
x-post="{route: 'index.html'}"
x-text="text"
></button>
</div>
<div x-data="{text: 'Make POST Request (Magic Style)'}">
<button
@click="$post({route: 'index.html', method: 'POST'}); text = 'Sending POST Request';"
@post="text = 'POST Request Sent'"
x-text="text"
></button>
</div>
</body>
</html>