1

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

我的直觉是,返回 JSON 数据以检测和更新新更改是最好的方法。但是对于一个大表格,有很多事情需要检查。标签、错误、帮助、值。从本质上讲,我可以看到form update logic变得越来越大并非常快速地产生维护问题。

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

4

3 回答 3

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

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

于 2013-03-20T17:45:00.180 回答
0

不确定这是否是最好的方法,但对于像我这样的新手,使用 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>
于 2013-03-20T17:45:54.553 回答
0

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

于 2013-03-20T17:57:29.353 回答