Сформируйте PUT, POST и DELETE вместе

Question

У меня есть форма с полями ввода, заполненными данными из внутреннего интерфейса, раздел заголовка (всегда один заголовок) и раздел строк (может быть более одной строки). Это выглядит так:

<form>
<header id="header">
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name"value="jhon">
    </div>
    <div class="form-group">
        <label for="name">Age</label>
        <input type="text" class="form-control" id="name" value="smith">
    </div>
</header>
<details id="row" >
    <article id="article-1">
        <div class="form-group">
            <label for="article-name">Article Name</label>
            <input type="text" class="form-control" id="article-name" value="article 1">
        </div>
        <div class="form-group">
            <label for="article-price">Article Price</label>
            <input type="text" class="form-control" id="article-price" value="100">
        </div>
        <button id="delete-article-1">-</button>
    </article>
    <article id="article-2">
        <div class="form-group">
            <label for="article-name">Article Name</label>
            <input type="text" class="form-control" id="article-name" value="article 2">
        </div>
        <div class="form-group">
            <label for="article-price">Article Price</label>
            <input type="text" class="form-control" id="article-price" value="200">
        </div>
        <button id="delete-article-2">-</button>
    </article>
</details>
<footer>
    <button id="add-article-row">+</button>
    <button id="submitButton" type="submit" class="btn btn-primary">Submit</button>
</footer>
</form>

при нажатии кнопки отправки. Я хочу выполнить запрос PUT для раздела заголовка (или без запроса, если нет изменений) и выполнить другое действие на основе строк:

CASE 1 : идентификаторы строк совпадают с идентификаторами исходных строк

• нет запроса, если нет изменений начальных значений

  OR

• запрос PUT, если значения изменяются (обновление на основе идентификатора статьи)

CASE 2 : добавлены новые строки

• нет запроса на строки, в которых нет изменений начальных значений AND запрос POST для новых строк (добавить статью)

  OR

• запрос PUT, если значения изменяются (обновление на основе идентификатора статьи) И запрос POST для новых строк (добавление статьи)

CASE 3 : одна или несколько строк удалены

• нет запроса на строки, в которых нет изменений начальных значений AND запрос DELETE для удаленных строк (на основе идентификатора статьи)

  OR

• запрос PUT, если значения изменяются (обновление на основе идентификатора статьи) И запрос DELETE для удаленных строк (на основе идентификатора статьи)

CASE 4 : добавлены новые строки AND одна или несколько строк удалены

• нет запроса на строки, в которых нет изменений начальных значений AND запрос DELETE для удаленных строк (на основе идентификатора статьи) AND запрос POST для новые строки (добавить статью)

  OR

• запрос PUT, если значения изменяются (обновление на основе идентификатора статьи) AND запрос DELETE для удаленных строк (на основе идентификатора статьи) AND запрос POST для нового строки (добавить статью)

Вопрос в том, как я могу создать форму, которая может обрабатывать все эти действия вместе? Основываясь на id строки, я могу зацикливаться при каждом нажатии кнопки и проверять измененные значения, новые и удаленные, а затем отправлять запросы на основе правильного варианта использования, но я не знаю, является ли это правильным способом настроить этот вид формы

PS: я использую Laravel из бэкэнда и jQuery для запросов AJAX

Спасибо за помощь

EDIT:

Я создаю пример файла jQuery для имитации формы, получения старых данных и отправки новых, здесь JSFiddle: https://codepen.io/ufollettu/pen/LaLKpe?editors=1111

Лучше ли отправлять уникальный запрос POST на мой контроллер BE, затем управлять логикой PUT / POST / DELETE в Laravel или отправлять несколько запросов AJAX (один для заголовка и один для каждой строки)?

Примечание: мне нужно откатить данные до старых, если один запрос тоже не прошел

Answer 1

Вы не можете сделать это с одним запросом, потому что PUT, POST и DELETE - это разные типы запроса. Если вы используете AJAX, вы можете определить три метода для отправки формы; один на тип запроса.

Так, например, основываясь на одном событии onClick, вы можете поворачиваться в своем слое JavaScript на основе того, какие входные данные имеют значения, или поворачиваться на каком-то другом аспекте состояния вашего приложения, чтобы выбрать, какой метод использовать, и, следовательно, какой тип запроса сделать.

Вы также можете выполнить несколько запросов на основе одного клика, вызвав все три метода подряд.

В любом случае, кажется, что лучшим решением было бы применение вышеуказанной методологии для каждой строки, а не для всей формы. Это, вероятно, позволит вам обобщить решение для строки и добавить столько строк, сколько вы хотите.