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相同

如果没有更改初始值，则不请求

OR
如果值更改（根据商品ID更新）的PUT请求

案例2 ：添加了新行

不请求对初始值没有更改的行 AND 对新行的POST请求（添加文章）

OR
值更改时的PUT请求（根据商品ID更新） AND 对新行的POST请求（添加商品）

案例3 ：删除了一个或多个行

不请求更改初始值的行并且删除请求的删除请求（基于商品ID）

OR
如果值更改（根据商品ID更新）的PUT请求并且针对已删除的行（基于商品ID）的DELETE请求

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

不请求更改初始值的行并且删除请求的删除请求（基于商品ID）并发布请求新行（添加文章）

OR
值更改时的PUT请求（根据商品ID更新） AND 对已删除的行的DELETE请求（基于商品ID） AND POST请求针对新行（添加文章）

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

PS：我正在使用后端的Laravel和jQuery进行AJAX请求

感谢您的帮助

编辑：

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

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

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

Answer 1

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

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

您还可以通过依次调用所有三种方法来一次单击执行多个请求。

在任何情况下，似乎更好的解决方案是逐行而不是整个形式应用上述方法。那可能会让您将解决方案归纳为一行，并允许您添加任意多的行。

将PUT与POST和DELETE一起使用的形式

1 个答案: