ajaxForm 的问题

Question

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

该应用程序是在 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”函数和“success”函数的函数也可以任意命名。如果您有不同的表单需要不同的处理，那么您需要为每个表单定义不同的功能。同样，请注意您的命名！

您的“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");
}

所以，就是这样。为了完成这项工作，我的代码全错了。经过一番挫折，我让它工作了。我想回来分享它，以便可以将问题标记为已回答（以防止任何人在我解决后浪费时间），并帮助将来可能偶然发现此消息的任何人。