What are You Looking for?

HTMX AJAX POST Example – JSON and File Upload

Introduction to HTMX AJAX POST

HTMX is a modern tool used for adding AJAX capabilities to your web applications without writing much JavaScript. By using special attributes in your HTML, you can quickly enable dynamic content updates. In this article, we’ll cover how to perform AJAX POST requests using HTMX, including posting simple data, JSON content, HTML forms, and file uploads, and we will explore how to handle responses from the server effectively.

HTMX AJAX POST example

Table of Contents

 

Simple POST Example

To carry out a simple HTMX AJAX POST, you define the following HTMX attributes in your HTML: ‘hx-post’ for the post URL and ‘hx-trigger’ for the event that initiates the POST request. Let’s create a function that triggers on a button click to post data to the server.

<button hx-post="/simplePost" hx-trigger="click">Send Data</button>

Output:

Server Response: Data Posted Successfully!

JSON POST Example

When you need to send JSON data, HTMX allows you to do so using ‘hx-headers’ to set the content type. Below is a function that posts JSON data:

<button id="jsonPostButton">Send JSON</button>

<script>
function postJSON() {
    var headers = {
        'Content-Type': 'application/json'
    };
    var body = {
        key: 'value'
    };
    htmx.ajax('POST', '/postJson', headers, JSON.stringify(body));
}

document.getElementById('jsonPostButton').addEventListener('click', postJSON);
</script>

Output:

Server Response: JSON Received!

Form POST Example

For posting form data, you can make use of the ‘hx-post’ attribute directly on the form element. Here’s how a function can be created to manage the form submission:

<form id="myForm" hx-post="/submitForm" hx-trigger="submit">
    <input type="text" name="username" />
    <input type="submit" value="Submit" />
</form>

Output:

Server Response: Form Data Processed!

File Upload Example

HTMX can also handle file uploads. You can monitor the ‘change’ event on the file input and use ‘hx-post’ to send the file data:

<input type="file" hx-post="/uploadFile" hx-trigger="change" />

Output:

Server Response: File Uploaded Successfully!

 

Handling Server Responses

HTMX provides ‘hx-swap’ and ‘hx-target’ for handling server responses. You can swap out content in the target element with what you’ve received from the server. See the following example:

<div id="response"></div>
<button hx-post="/getResponse" hx-trigger="click" hx-swap="outerHTML" hx-target="#response">Get Response</button>

Output:

<p>This is the new content from the server!</p>

 

Conclusion

In this comprehensive guide, we’ve explored various ways to perform HTMX AJAX POST requests, including simple data posts, JSON, form data, and file uploads. HTMX simplifies the process of dynamically updating content and responding to server interactions without extensive JavaScript. By using the examples provided, developers can effectively utilize HTMX for seamless content updates in modern web applications.

References

  • HTMX Official Documentation
  • AJAX Post and Request Handling Guides
  • JSON Data Structures

 

ByRavishanker Kusuma
Updated on