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

Question

Как использовать метод PATCH в html-форме для отправки данных на сервер?
Я уже сделал это
Html

      <form class="type-title"  method="POST" id="alter">
        <input type="hidden" name="_method" value="PATCH"/>
        <input id="alter" type="text" name="alter"/>
        <button onclick="alter_name();">update</button>
</form>

JS

      function alter_name(){
    fetch("http://127.0.0.1:3000/api/member", {
        method: 'PATCH',
        headers: {
            'Content-type' :'application/json'
        },
        body: {
            "name":alter_name.value.toString()
            } 
    }),then((response) =>{
        return response.json();
    }).then((data) =>{
        console.log(data);
    })
}

но все равно не работает

Answer 1

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

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

      <form class="type-title" id="alter_form">
    <input id="alter" type="text" name="alter"/>
    <button onclick="alter_name();" type="button">update</button>
</form>

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

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

• Обратите внимание, как на поле ссылаются с помощью путиformId.fieldId.value

Другая проблема, с которой вы столкнулись, заключалась в том, что ваш объект 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реализации не возвращают контент, если вы явно не запросите его с помощьюPreferHTML-заголовок.