The basics: hx-post
So we're going to talk about the other big request option in HTMLX, which is h x post. So we've we've mentioned h x get before, which is kind of your basic, just a get request to the server. Everybody will probably be familiar with a post request to the server. There's different reasons you'd want to use post, instead of get, and none of this is HTMLX specific to start off. A post request is kind of you could think of it I think of it as if you're going to make a change on the server, you should do a post request.
Lazarus:It's more secure. It encrypts everything that you send. So rather than a get request, which just puts it up into the URL bar and, you know, you send whatever whatever values you send, you can, they can be, sort of seen. It's part of the URL. A post request is anytime you do anything private or do something that's going to affect stuff on the server and make changes, you probably want to use a post request.
Lazarus:So in h t m x, that's h x dash post, and then you put a URL for which URL you're going to hit. And then that should be handled, you know, by your server side as a post request, but that's nothing there is specific to HTMLX. Where it starts to get a little more you know, you start to see the power. Normally, a post request is when you submit a form. You know, just with regular HTML, you do form method equals post, and you submit the form, it submits it.
Lazarus:And now with HTMLX, you can submit a post request on anything. So it doesn't have to be a form anymore. Any place you've already used 'git', you can now use post. But post requests do have some requirements from the server. And this is sort of one of the one of the trickier things about anything, you know, about any time you do a post request, you have the the cross site request forgery, token.
Lazarus:So this is something that your server sets up to make sure that it's okay that this post request is coming in and where it's coming in from. It's just kind of a it's a token that that your server says, you know, basically has an expiration time on it, but it says that, you know, this is fine for you to to send this. So normally people are used to adding that. They add it as a hidden input into their form. When you're using HTMLX, because you're given the extra power to put a post request anywhere on anything, it's one of the things that can trip people up is remembering that you would still need that security.
Lazarus:You still need the CSRF token, you know, a course, c o r s. These are probably terms that are familiar with you, have nothing to do with HTMLX. It's just part of HTML and and web security in general. But when you're doing post requests from anywhere and you're doing you've given this extra power, you have to sort of handle that and and make sure you're handling that, in a, possibly in a different way. So if you're just doing a regular form, you can put on the form tag, instead of doing action equals, you can do h x post equals to a URL.
Lazarus:And that's going to replace the exact same format, except that it's now going to be HTML sending a an ajax request. You can also put a target on that so that whatever response comes back goes into the target. So an example would be like a form where you submit something and then the request shows you that yes, you know, whatever you submitted, was completed or added to the list or whatever else it is. But you can do some more interesting stuff with HX post. Like if you use it in combination with HX include, which we haven't talked about yet, but if you use it with hx include, that lets you set a CSS target for another form.
Lazarus:So you could submit a form from outside of the form, and you as long as you put that h x include in h x include, you put the target of the form, and it will include every value, same as any other HTML value, an input, a select, anything with a name. It will include that along with the, submission. So you do hx post equals and you set the URL and then hx include and you set the form ID. So you can submit forms from other places on the page. If you're doing something like that, you may not you know, this is an example of the CSRF token.
Lazarus:If you're just doing a regular form, you can always include it as a an into input type equals hidden and then put your token there. But there's other options, and I'm actually going to put some of those options, into the notes on this show. But you can, use the HTML header. So HX headers, and you can put the CSRF token there. Or you can add some JavaScript to put the CSRF token on every request, every request that HTMX makes.
Lazarus:That way, you just put it in there once and you don't need to think about it anymore. So in general, h x post gives you that ability to, you know, these are usually used for updates, for new items. Usually in HTML and all these other things, everything is using posts. But one of the nice things about HTMLX is that it's it's giving you back some of those other options. So we'll talk about them, you know, they're not the standard ones, but you have h x put, h x delete, h x patch.
Lazarus:So these are built in HTML options that are basically just never used, but they each actually do have their own functionality. So you could think of post. I would say primarily that's for adding new things. So when you're submitting something, if you're thinking of it in terms of rest, you know, this is the store. This is the part where you're adding something new to the site.
Lazarus:If you want to start using those other ones, which we may talk about in a in a future time, you can use those for specific things like updating a record or deleting a record and those sort of things. And that's just kind of to make this whole process more, you know, bring it back to its roots of what these things actually have a meaning, this h t t protocol. You know, there's a reason they set up all these different protocol commands. So we've all just been using posts because it's the easiest, you know, you just do post if you're changing something, get if you're just receiving data. But there there can be more to it, and there's a a an actual benefit from using the other words as you want to.
Lazarus:But for now, you can just sort of have that power of post, but use it from anywhere. And there is one other thing to mention on this just as as an aside, we mentioned earlier. I mentioned earlier that on in HX trigger, the default on a button is click. So the default on a form, if you put h x post onto a form, the default is not click. It doesn't trigger that.
Lazarus:The default is submit. So h x trigger equals submit. So but you can just leave the h x trigger off because assuming that when you put that onto a form, the h x post, that you probably want to have it triggered on a submit. So that's just an example of how the trigger can be different defaults depending on which tag you're using and which or which attribute you're using. So h x post basically gives you the ability to make these post requests without doing, you know, this is HTMLX, without doing a full page reload and submission so you don't get that little blip that, you know, people don't like when you when you submit the entire page.
Lazarus:It gives you the ability to do that from anywhere on the page and there's specific tools that you need to sort of look out for to handle the CSRF protection on the server. And it basically gives you all the power of using your post requests, in the same way that you would use the get. So you can mix and match with all these other attributes. You can do targeting. You can do swapping, and you can do, you know, anything else that you can do on any other request in h t m x.
Lazarus:You can now do with an encrypted post request.
