imacrayon / alpine-ajax

An Alpine.js plugin for building server-powered frontends.
https://alpine-ajax.js.org
MIT License
558 stars 11 forks source link

Add `x-headers` and `$ajax` `headers` option #49

Closed imacrayon closed 7 months ago

imacrayon commented 8 months ago

Fixes #44

Use x-headers to set request headers, JavaScript expressions allowed:

<form method="post" action="/articles" x-headers="{'X-CSRFToken': '{{ csrf_token }}'}">

Use the headers option to set request headers for $ajax magics:

<div @click="$ajax({
  method: 'post',
  action: '/articles',
  headers: { 'X-CSRFToken': '{{ csrf_token }}'},
})">

This PR also adds an X-Alpine-Target header in every request which lists the IDs (space-separated) of all targets on the page:

<form method="post" action="/articles x-target="articles articles_count">

Issues a request with headers:

X-Alpine-Request: true
X-Alpine-Target: articles articles_count

This could be used to generate HTML fragments on the server.

knowsuchagency commented 6 months ago

Amazing. Thanks for this update!