Question

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

我的直觉是，返回JSON数据来检测和更新新的更改是最好的方法..但是有一个很大的形式，有很多东西需要检查。标签，错误，帮助，价值观。从本质上讲，我可以看到form update logic越来越大，并且创建维护问题非常快。

我希望了解通过AJAX更新大型表单的最佳实践是什么。也许我错过了标准化技术。

Answer 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...

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

Answer 2

不确定这是否是最佳方式，但对于像我这样的新手，使用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>

Answer 3

如果我理解正确，“在没有最终提交的概念中将旧表单与新表单同步”基本上存在于控制器中。我有一个控制器动作为每个返回的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控制器，并处理请求字符串或发布参数以更新数据库。

更新Ajax提交的表单

3 个答案: