更新 Ajax 提交的表单答案

【问题标题】：Updating an Ajax Submitted Form更新 Ajax 提交的表单
【发布时间】：2013-03-09 23:20:28
【问题描述】：

我使用Symfony2 生成了一个相当复杂的表单，并使用Twig,JQuery 进行渲染。该表单用于修改电子商务订单，因此没有最终提交的概念。通过 Ajax 提交表单时，如何将旧表单与新表单同步？我曾考虑使用它返回整个表单以完全覆盖旧表单或返回 JSON 数据，然后可用于检测和更新更改。

我的直觉告诉我，返回 JSON 数据以检测和更新新更改是最好的方法。但如果表单很大，有很多事情需要检查。标签、错误、帮助、值。从本质上讲，我可以看到 form update logic 变得越来越大，并且很快就会产生维护问题。

我希望了解通过 AJAX 更新较大表单的最佳做法是什么。也许我错过了一种标准化的技术。

【问题讨论】：

标签： jquery ajax forms symfony

【解决方案1】：

要更新大型表单，我将返回一个非常具体的 JSON 对象，它允许您执行 for-each 循环来自动检查。我将在下面放一个示例。

data:
    firstField:
        name: "name"
        error: "none"
        help: "This is a help string"
        value: "$49.99"
        quantity: "2"
        subForm1: 
            value1: "something"
            value2: "somethingElse"
    //etc...

返回此对象后，您可以执行类似以下伪代码的操作

for field in data
    find element with name field.name
        if element.error is not field.error, element.error = field.error
        if element.quantity is not field.quantity, element.quantity = field.quantity
        //ifs for each intended field of the form
        element.find newElement with name subform1
            if newElement.value1 is not field.subform1.value1 update it
        //etc...

这将允许您创建一种相当简单的方法来检测表单的更改，并且只更新需要更新的字段。

【讨论】：

我喜欢你建议的概念。您认为这对于多层子表单/集合类型是否可行？因为那时，JSON 数据的数组看起来非常抽象。
我已经更新了我的答案，希望它对你有用。如果您计划有子表单，则需要多声明一点 JSON 对象结构，因为您需要知道何时进入另一个 for 循环，除非您执行 jQuery 类型检查以查看对象是字符串还是实际对象...如果您想要更多详细信息，我可以稍后添加。

【解决方案2】：

如果我理解正确，“将旧表单与新表单同步”在没有最终提交的概念中基本上持续存在于控制器中。对于返回的每个 json 块，我都有一个控制器操作，但我使用最终提交概念。但是，您可以通过将持久调用放在这些控制器中来使用此技术。

类似的东西 js：

$('#field').on(function(){
           $.ajax({
                url: // url to your controller 
                     // captures relevant information via
                     // javascript and passes it via querystring
                     // or possibly post
                ,dataType: 'jsonp'
                ,success: function(entities, status, ob) {
                    // javascript response
                    // for display purposes
                }});
});

使用标准的 symfony 控制器，并处理请求字符串或发布参数以更新您的数据库。

【讨论】：

我认为我看到的问题是 Symfony 控制器返回 $form->createView() 并且 Twig 使它变得有用。那么我如何将->createView() 的某些版本返回到更新的表单显示？
我通常从我的控制器返回树枝的渲染，其中 form->createView 作为变量传递；如果你有不同的 schtick，那么我不确定我的方法是否有效。但是，我偶尔会使用一个救助函数，它会返回 $this->redirect($this->generateUrl, array( /* parameters */));正是这个带有参数的重定向，我将使用它来更新表单。

【解决方案3】：

不确定这是否是最好的方法，但对于像我这样的新手，使用 Spring MVC，我基本上只是返回一个“视图”，其中包含我保存 AJAX 提交后的 HTML 内容。

我没有方便显示的代码，但从概念上讲，这就是它的样子。我猜 JSON 将是一个较小的有效载荷返回给浏览器，但是对于像我这样的傻瓜来说，发回 HTML 更容易。

<form action="/form/save" method="post">
  First name: <input type="text" name="firstname"><br>
  Last name: <input type="text" name="lastname">
</form>

<form action="/form/save" method="post">
<!-- Start: This is the HTML that the "view" returns after the form is submitted via AJAX -->
  First name: <input type="text" name="firstname" value="Mark"><br>
  Last name: <input type="text" name="lastname" value="McGuire">
<!-- End: -->
</form>

【讨论】：