0

所以，这是我遇到的问题：我正在尝试使用 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 文档，但没有找到答案。

先感谢您！

4

1 回答 1

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

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

于 2013-03-28T22:19:46.053 回答