形成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请求（如果没有更改则没有请求）和基于行的不同操作：

情况1 ：行ID与初始行ID相同

• 没有请求，如果初始值没有变化

  要么

• 如果值更改，则为PUT请求（根据文章ID更新）

案例2 ：添加了新行

• 针对行不请求具有到初始值， 并且不可更改为新的行的POST请求（添加的物品）

  要么

• PUT请求，如果值更改（基于文章ID更新） 和新行的POST请求（添加文章）

情况3 ：删除一行或多行

• 对于具有到初始值， 并没有变化，被删除的行一个DELETE请求的行没有请求（基于物品ID）

  要么

• PUT请求，如果值更改（基于文章ID更新） 和删除行的DELETE请求（基于文章ID）

案例4：新行添加一个或多个行删除

• 对于具有到初始值， 并没有变化，被删除的行一个DELETE请求的行没有请求（基于物品ID） 和新的行的POST请求（添加的物品）

  要么

• PUT请求，如果值更改（基于文章ID更新） 和删除行的DELETE请求（基于文章ID） 和新行的POST请求（添加文章）

问题是：我如何构建一个可以一起处理所有这些操作的表单？ 基于row-id我可以在每次单击按钮时循环并检查更改的值，新的和已删除的值，然后根据正确的用例发送请求，但我不知道这是否是正确的方法设置这种形式

PS：我正在使用后端的Laravel和jQuery来处理AJAX请求

感谢您的帮助

编辑：

我创建了一个示例jQuery文件来模拟表单，获取旧数据和发送新数据，这里是一个JSFiddle： https ：//codepen.io/ufollettu/pen/LaLKpe ？ edit = 1111

最好向我的BE控制器发送一个唯一的POST请求，然后管理Laravel中的PUT / POST / DELETE逻辑，或者发送多个AJAX请求（一个用于标题，一个用于每一行）？

注意：如果单个请求也失败，我需要将数据回滚到旧数据

Answer 1

您不能使用单个请求执行此操作，因为PUT，POST和DELETE都是不同类型的请求。 如果您正在使用AJAX，那么您可以定义三种方法来执行表单提交; 每种类型的请求一个。

因此，例如，基于单个onClick事件，您可以根据哪些输入具有值在您的JavaScript层中进行透视，或者在您的应用程序状态的某些其他方面进行透视，以便选择使用哪种方法，从而选择哪种请求类型制作。

您也可以通过连续调用所有三种方法，基于单击执行多个请求。

无论如何，似乎更好的解决方案是在每行上应用上述方法，而不是在整个表格上。 这可能允许您将解决方案概括为一行，并允许您根据需要添加任意数量的行。