如何返回未经验证的 AJAX/JSON 表单以进行更正？

Question

我的网站的用户填写 AJAX/JSON 表单。

分解

1. 我将 json 对象传递到外太空。
2. 比对象在我的控制器中失败，
3. 然后我的控制器加载第二个部分。
4. 然后，当我单击并出现免责声明时，
5. 第二部分消失。

我将 json 对象传递到外层空间。

            $.ajax({
                url: foo_url,
                data: dataString,
                type: "POST",
                dataType: 'json',
                success: function(data) {

该对象在我的控制器中失败

  respond_to do |wants|
    wants.json { render :json => {:errors => @card_signup.errors, :html => (render_to_string :partial => '/card_signups/new_form') } }
  end

然后我的控制器加载第二个部分。

这有效地隐藏了第一个部分，并将较新的放在上面。不知道这种情况在代码中如何或在何处发生，它只是因为控制器调用它而发生，我假设。

然后，当我单击并出现免责声明时

当免责声明出现时，最新的表单完全消失，只留下旧的未经验证的蹩脚表单。同样，系统中没有代码说明要执行此操作，这只是应用程序在加载两个表单并失败时执行的操作。

按发送

哎呀，它尝试注册唯一的表单（失败的表单），整个应用程序失败了。

大问题：

我怎样才能至少阻止对象渲染两次，并使其更新表单。这应该可以解决整个问题。

基本上，我不告诉它再次渲染 new_form，而是如何告诉它只返回包含错误的旧表单？

Answer 1

查看用于发布表单并处理返回的 JSON 数据的 JavaScript 代码将有所帮助。

我有点同意 Vlad 的观点，即您不会返回表单的整个 HTML，而是编写一些 JavaScript 代码来在现有表单上显示错误消息。这实际上就是我处理它的方式，但如果您想将 JavaScript 保持在最低限度，您可以执行类似于以下操作的操作：

在您的页面上，这应该来自您的 new_form 部分：

<form id="my_form">
  ....
</form>

您的 javascript 提交表单并处理回调：

    $.ajax({
      url: foo_url,
      data: dataString,
      type: "POST",
      dataType: 'json',
      success: function(data) {
            if (data.errors) {
              $("#my_form").html(data.html); // replace old form
            }
            else {
              // Everything was OK, so do something here.  Perhaps reset the form?
            }
        }
    });

Answer 2

如果没有更多代码，我无法真正弄清楚为什么您的表单消失，但关于我的评论，它是这样的。
在 ajax 表单提交时，将数据发送到服务器进行验证。如果数据有效，则向客户端发送带有状态属性的 json 对象。如果数据无效，请向客户端发送相同的 json 对象，其中包含状态属性和另一个将保存错误消息的属性。它应该看起来像这样：

// validation ok
response = {status: 'ok'}

// validation errors
response = {status: 'error', msg: 'Invalid username<br />Invalid email addres...'}

在客户端检查响应的状态属性。如果等于“确定”，请执行某些操作，否则将response.msg 附加到页面上的任何容器元素，

我希望我说得清楚。
祝你好运