Question

所以，这就是我遇到的问题：我正在尝试使用jQuery和ajaxForm（Form插件）提交表单。但是，当我单击提交按钮时，我没有得到任何响应（并且没有错误）。表单上有必填字段，我目前期待的响应是一个警告，通知我缺少一个（或多个）必填字段，并详细说明哪些字段需要数据才能成功完成表单。

应用程序是在CodeIgniter中构建的，这就是表单操作看起来像它的方式。

这是我的jQuery代码：

$(function () {

  $("#div_id").dialog({

    autoOpen: false,
    closeOnEscape: true,
    modal: true,
    width: 600,
    title: "A Title",
    buttons: {

      "SUBMIT": function() {

        $("#form_id").ajaxForm({

          dataType: "json",
          success: function(response) {

            response = $.parseJSON(response);
            alert(response['message']);
          }
        });
      },
      "CANCEL": function() {

        // Some clean up here
        $("#div_id").dialog("close");
      }
    },
    close: function() {

      // Some clean up here
      $("#div_id").dialog("close");
    }
  });
});

这是表格标签：

<form method="post" id="form_id" action="/controller/function">

另外，我在ajaxForm插件中正确链接。所以，问题并不存在于那里。我还在学习jQuery，感谢任何帮助。我一直在查看http://www.malsup.com/jquery/form/和jQuery文档，但还没有找到答案。

提前谢谢！

Answer 1

我已经解决了这个问题。对于今后发现这个问题和答案的人来说，这就是我必须要做的事情：

首先，这是一个示例onload函数（假设您使用的是jQuery）：

$(function () {
  $("#div_id").dialog({

  autoOpen: false,
  closeOnEscape: true,
  modal: true,
  width: 600,
  title: "Your Title",
  buttons: {

    "SUBMIT": function() { $("#form_id").submit() },
    "CANCEL": function() {

      // Other clean-up functions here
      $("#div_id").dialog("close");
    }
  },
  close: function() {

    // Other clean-up functions here
    $("#div_id").dialog("close");
  }
  });
});

确保您的submit（）调用位于

内

function(){ }

当我没有这样做时，我的表单会在页面加载后继续尝试提交。当我将它们放在上面的代码行中时，这就停止了。

以下所有内容都来自上面的onload函数。

其次，设置ajaxForm选项变量：

var ajaxFormOptionsVariable = {

  beforeSubmit:  ajaxFormPreSubmitFunction,
  success:       ajaxFormPostSubmitFunction,
  type:          "post",
  dataType:      "json"
};

现在，您可以快速了解一下您的ajaxForm选项。什么应该是显而易见的（但可能不是 - 而且没关系）是你可以根据需要命名你的变量。可能不太明显的是，您将需要为页面上的每个表单对话框添加一个单独的变量。小心你的命名！

名为“beforeSubmit”功能和“成功”功能的功能也可以命名为您想要的任何名称。如果您有不同的表格需要不同的处理，那么您需要为每个表单定义不同的功能。再次，小心你的命名！

您的“beforeSubmit”功能是可选的。您也可以使用“get”作为“type”，我知道“dataType”还有其他选项，但我不知道它们（目前不需要它们）。但是，如果您不希望将数据作为json对象提交，那么请对插件进行一些研究以找到您的选项。

第三，实例化你的ajaxForm对象：

$('#form_id').ajaxForm(ajaxFormOptionsVariable);

第四，定义你的“beforeSubmit”和“success”函数：

function ajaxFormPreSubmitFunction(response, statusText, xhr, $form) {

  // Whatever processing you want to do before the form is submitted - 
  // probably validation
}

function ajaxFormPostSubmitFunction(response, statusText, xhr, $form) {

  // Whatever processing you want to do after the form is submitted
  // This is where displaying a message to the user happens
}

关于提供给回调函数的参数的一些简短的说法。首先，响应是从服务器返回的任何内容。其次，你不需要

response = $.parseJSON(response);

自动解析响应。在我的脚本的帖子提交回调中，我实际上返回一个数组，其中一个元素是真/假值，另一个是我想要显示给用户的任何消息，如下所示：

if (response['result'] == true) {

  $("#success_dialog").html(response['message']);
  $("#success_dialog").dialog("open");
}
else {

  $("#error_dialog").html(response['message']);
  $("#error_dialog").dialog("open");
}

所以，就是这样。为了完成这项工作，我的代码完全错了。经过一番挫折之后，我有了它的工作。我想回来分享它，这样问题就可以得到回答（以防止任何人因为我已经解决了问题而浪费时间在这上面），并且还要帮助那些可能在将来偶然发现这条信息的人。

麻烦与ajaxForm

1 个答案:

以下所有内容都来自上面的onload函数。