Html form method patch

Http Method Spoofing & Helper Components in AdonisJS

In this lesson, we’ll learn how we can utilize Http Method Spoofing to send PUT, PATCH, and DELETE requests using native HTML forms. We’ll then create utility functions to make the implementation cleaner.

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Native HTML only supports sending GET and POST requests with forms to the server. However, utilizing Method Spoofing with AdonisJS we can spoof POST requests to the remainder of the Http Methods, ie: PUT, PATCH, and DELETE so that AdonisJS utilizes the spoofed method to match the desired route.

In essence, if we wanted to target a PUT: /posts route, we can do so using Method Spoofing and a native HTML form.

Method Spoofing Requirements

In order to utilize Http Method Spoofing with AdonisJS a few conditions need to be met.

1. http.allowMethodSpoofing within our config/app.ts file must be true . This is defaulted to false within new projects.
2. Our native HTML form must use POST as its method.
3. The route’s URL must contain the spoofed method in its query string.

Turning On Method Spoofing

The most important thing to note from above if you’re looking to use Method Spoofing is that you need to enable it within your AdonisJS project. To do so, open your config/app.ts file and scroll down to the http config. allowMethodSpoofing should be one of the first properties under http , just set its value to true .

export const http: ServerConfig =  /*  |--------------------------------------------------------------------------  | Allow method spoofing  |--------------------------------------------------------------------------  |  | Method spoofing enables defining custom HTTP methods using a query string  | `_method`. This is usually required when you are making traditional  | form requests and wants to use HTTP verbs like `PUT`, `DELETE` and  | so on.  |  */  allowMethodSpoofing: true, // .  >

Method Spoofing Query String

In order to specify what Http Method we want our request spoofed to, we’ll need to define it within our action URL’s query string. The structure for this is ?_method=PUT , where PUT is the Http Method we want our request spoofed too.

// received by POST: /posts form method="POST" action="/posts">form> // received by PUT: /posts form method="POST" action="/posts?_method=PUT">form> // received by PATCH: /posts form method="POST" action="/posts?_method=PATCH">form> // received by DELETE: /posts form method="POST" action="/posts?_method=DELETE">form>

Above the routes are hard coded for clearness, but we can also apply this using the route method as well.

// received by POST: /posts form  method="POST"  action=" <route('posts.store') >>" >form> // received by PUT: /posts form  method="POST"  action="  route('posts.update', <>, < qs: < _method: 'PUT' >>)  >>" >form> // received by PATCH: /posts form  method="POST"  action="  route('posts.pubish', <>, < qs: < _method: 'PATCH' >>)  >>" >form> // received by DELETE: /posts form  method="POST"  action="  route('posts.destroy', <>, < qs: < _method: 'DELETE' > >)  >>" >form>

This is great, but using the power of components we can clean this up and make it a lot more readable and reusable!

Http Method Spoofing Helper Components

Now that we’re familiar with Method Spoofing and what it looks like, let’s extract these various spoofed methods into helper EdgeJS Components to make adding these to any page a breeze.

First, go ahead and create the following directory tree, if needed.

/resources/views/components/forms/

We’ll be adding all our form helper components here. By adding our EdgeJS Components inside the resources/views/components directory, we can simplify how we use our methods because AdonisJS binds these components directly to a tag name.

Here’s how we’d need to use them if we put them anywhere else:

@component('path/to/component/forms/post', <>) > @end

Here’s how we can use them thanks to placing them at resources/views/components :

As you can see, the latter is super concise and easy to read!

POST Helper Component

Our POST Method helper component will be the most straightforward since it’s the native HTML behavior, so we’ll start here. Let’s start by creating a file for it called post.edge .

> form method="POST" action="< action >>"> << await $slots.main() >>> form>

Note: >> will render anything we put inside the component’s tags, it’s the same premise as slots in Vue or React.

Using the POST Helper Component

When it comes to using our post helper component, all we need to add is:

PUT Helper Component

From here out we’ll need to add our method spoofing designation to the action’s URL. There are several different ways to go about this. The most straightforward way I could think of was to add it directly to our action variable.

> @set('action', action.includes('?')   ? `$ &_method=PUT`   : `$ ?_method=PUT` ) form method="POST" action="< action >>"> << await $slots.main() >>> form>

So, for our action variable we’re checking to see if it already includes a query string by checking for the presence of the ? character. If it does we’ll add it to the end of the query strings, otherwise, we’ll start it as the query string.

Using the PUT Helper Component

Thanks to the component taking care of the spoofing for us, the usage for PUT will look as simple as our POST.

PATCH & DELETE Helper Components

For PATCH & DELETE, all we need to do is copy/paste our PUT component and update the Method Spoofing value in our action’s URL.

> @set('action', action.includes('?')   ? `$ &_method=PATCH` // 👈 set to PATCH  : `$ ?_method=PATCH` // 👈 set to PATCH ) form method="POST" action="< action >>"> << await $slots.main() >>> form>

Then, do the same for DELETE

> @set('action', action.includes('?')   ? `$ &_method=DELETE` // 👈 set to DELETE  : `$ ?_method=DELETE` // 👈 set to DELETE ) form method="POST" action="< action >>"> << await $slots.main() >>> form>

DELETE is now ready to go:

Join The Discussion! (0 Comments)

Please sign in or sign up for free to join in on the dicussion.

Источник

PATCH

The HTTP PATCH request method applies partial modifications to a resource.

PATCH is somewhat analogous to the «update» concept found in CRUD (in general, HTTP is different than CRUD, and the two should not be confused).

A PATCH request is considered a set of instructions on how to modify a resource. Contrast this with PUT ; which is a complete representation of a resource.

A PATCH is not necessarily idempotent, although it can be. Contrast this with PUT ; which is always idempotent. The word «idempotent» means that any number of repeated, identical requests will leave the resource in the same state. For example if an auto-incrementing counter field is an integral part of the resource, then a PUT will naturally overwrite it (since it overwrites everything), but not necessarily so for PATCH .

PATCH (like POST ) may have side-effects on other resources.

To find out whether a server supports PATCH , a server can advertise its support by adding it to the list in the Allow or Access-Control-Allow-Methods (for CORS) response headers.

Another (implicit) indication that PATCH is allowed, is the presence of the Accept-Patch header, which specifies the patch document formats accepted by the server.

Request has body	Yes
Successful response has body	May
Safe	No
Idempotent	No
Cacheable	Only if freshness information is included
Allowed in HTML forms	No

Syntax

Источник

Использование метода PATCH в html-форме

Основная проблема заключается в том, как вы обратились к входному значению. Идентификатор вашей формы: id=»alter» это то же имя, что и ввод, который недействителен, но в вашем скрипте вы вообще неправильно ссылаетесь на это поле, давайте все это исправим.

Во-первых, с HTML-формой не отправляйте обратно, так как это может повлиять на другие рабочие процессы в форме. Мы делаем это, заставляя кнопку действовать как простую автономную HTML-кнопку, а не как кнопку отправки для формы. Сделайте это, установив type атрибут кнопки для «button» :
_Я также изменил идентификатор формы, чтобы он был уникальным, и удалил _method скрытый ввод.

• Вы были на правильном пути с использованием javascript и fetch() для отправки данных, поскольку ваш API вряд ли будет настроен на прием данных формы , если вы используете его в качестве метода при отправке стандартной формы.

Другое исправление находится в самом скрипте, нам нужно преднамеренно упорядочить полезную нагрузку объекта, которую мы отправили в теле, таким образом мы можем контролировать или обеспечивать сериализацию вместо того, чтобы полагаться на javascript, мы также можем более легко проверять содержимое, когда или если это идет не так.

Другая проблема, с которой вы столкнулись, заключалась в том, что ваш объект JSON был сформирован неправильно, у вас были кавычки вокруг имени свойства, что привело бы к экранированию кавычек и кодированию их в строковое значение JSON, чего мы не хотим.

Наконец, я указал кодировку в Content-Type так как в моей системе требовалось анализировать содержимое на стороне сервера.

function alter_name()< let content = < Details: alter_form.alter.value.toString() >; fetch("http://127.0.0.1:3000/api/member", < method: 'PATCH', headers: < 'Content-type': 'application/json; charset=UTF-8', 'Accept': 'application/json' >, body: JSON.stringify(content) >).then((response) => < console.log('PATCH Response.status: ', response.status); if(response.status !== 204) return response.json(); else return response.statusText; >).then((data) => < alert(data); >); > 

За несколько бонусных баллов я добавил обработку для 204: No Content ответ от сервера. Много PATCH реализации не возвращают контент, если вы явно не запросите его с помощью Prefer HTML-заголовок.

Источник