Header Small Ahoy!

HTTP Methods in Trongate MX

Trongate MX provides a set of attributes that allow you to make various types of HTTP requests directly from your HTML elements. These attributes correspond to different HTTP methods and enable you to create dynamic, interactive web applications with minimal JavaScript.

Available HTTP Method Attributes

Trongate MX supports the following HTTP method attributes:

  • mx-get: For making GET requests
  • mx-post: For making POST requests
  • mx-put: For making PUT requests
  • mx-patch: For making PATCH requests
  • mx-delete: For making DELETE requests

HTTP Method Attributes at a Glance

Attribute HTTP Method Typical Use
mx-get GET Retrieve data
mx-post POST Submit new data
mx-put PUT Update existing data
mx-patch PATCH Partially update data
mx-delete DELETE Delete data
Note: While PHP can handle PUT, PATCH, and DELETE requests, it doesn't process their data in the same way as POST requests. Additionally, some browsers may not directly support these methods for security reasons. Trongate MX addresses both issues by using POST requests with an additional parameter indicating the intended method (PUT, PATCH, DELETE). This ensures compatibility across different browsers and simplifies data handling on the server-side, while maintaining the desired HTTP method functionality.

How to Use HTTP Method Attributes

To use these attributes, simply add them to your HTML elements with the URL you want to request as the value. For example:

<button mx-get="<?= BASE_URL ?>api/get_data">Get Data</button>

More Examples

GET Request

<button mx-get="<?= BASE_URL ?>api/get_data" mx-target="#result">Get Data</button>
<div id="result"></div>

POST Request (Form Submission)

In form submission scenarios, the 'mx' attributes are typically attached to the opening 'form' tag, not on the submit button as some might expect. It's important to note that the 'mx-post' attribute will override any 'method' or 'action' attributes that may have been declared in the opening 'form' tag.

<form mx-post="<?= BASE_URL ?>api/submit_data" mx-target="#result">
    <input type="text" name="data">
    <button type="submit">Submit</button>
</form>
<div id="result"></div>

Best Practices

  • Use appropriate HTTP methods for different operations (GET for retrieving data, POST for submitting data, etc.)
  • Always provide a target for the response using the mx-target attribute
  • Handle both success and error cases in your server-side code and client-side logic
  • Use loaders (mx-indicator) to provide visual feedback during requests

Notes

  • The mx-get attribute can be used on any element, while mx-post, mx-put, and mx-patch are typically used with form elements
  • For security reasons, browsers may not allow PUT, PATCH, or DELETE requests directly. In such cases, you may need to use POST with an additional parameter indicating the intended method
  • Always validate and sanitize data on the server-side, regardless of the HTTP method used

Summary

Trongate MX provides a powerful set of attributes for handling various HTTP methods directly from your HTML, enabling dynamic web interactions without writing JavaScript:

  • mx-get, mx-post, mx-put, mx-patch, and mx-delete correspond to different HTTP methods.
  • These attributes can be easily added to HTML elements to trigger server requests.
  • GET requests are typically used for retrieving data, while POST, PUT, and PATCH are used for sending data to the server.
  • Form submissions are handled seamlessly, with automatic form reset and submit button disabling.
  • Responses can be targeted to specific DOM elements using the mx-target attribute.
  • Best practices include using appropriate HTTP methods, providing visual feedback with loaders, and handling both success and error cases.
  • Always prioritize server-side validation and data sanitization for security.

By leveraging these HTTP method attributes, Trongate MX empowers developers to create interactive, efficient web applications with minimal code, while maintaining a clear separation between HTML structure and server interactions.