jQuery 和 Codeigniter - 使用 ajax 发布表单并在fancybox 中显示结果答案

【问题标题】：jQuery and Codeigniter - post form with ajax and show result in fancyboxjQuery 和 Codeigniter - 使用 ajax 发布表单并在fancybox 中显示结果
【发布时间】：2011-10-28 00:08:14
【问题描述】：

我正在使用这段代码来实现我在标题中所说的：

$("#design-preview").click(function() {

      e.preventDefault();

      var data = $(this).closest("form").serializeArray();

      $.ajax({
        type        : "POST",
        cache       : false,
        url         : base_url,
        data        : data,
        success : function(data) {
          $.fancybox(data, {
            'type'  : 'iframe',
            'width' : 340,
            'height': 500
          });
        }
      });
      return false;
    });

问题是，我是从萤火虫那里得到的：

"NetworkError: 400 Bad Request - http://domain.info/%3C!DOCTYPE%20html%20PUBLIC"

它以某种方式将表单的结果添加到链接中。有谁知道这是为什么？也许有更好的建议？

编辑：ajax 帖子的响应是一个 HTML 页面。 HTML 代码是由 fancybox 附加到链接的，所以我想这会缩小研究范围。帖子是正确的，我用萤火虫检查了。

谢谢。

【问题讨论】：

url 必须指向处理输入序列化数组的文件或控制器
@Alfonso：你好！不，这是一个链接。我纠正了点击处理程序，尽管帖子变量被正确接收。我猜 jQuery 15 数字采用了放置链接的形式。
在Firefox中，检查console.log(base_url)和console.log(data)的输出是否成功。 base_url 不受fancybox 在此代码中的影响。

标签： jquery ajax codeigniter post fancybox

【解决方案1】：

我猜错误在于 url: base_url 参数，因为请求包含无效的 url 字符，您可能会显示 base_url 值，或者您的意思是 <?=base_url();?>

【讨论】：

您好！ base_url 是一个 javascript 变量，它准确地存储了 base_url() 返回的内容。它在 html 模板的 head 部分中设置。
@cili：您可能需要仔细检查一下。似乎 base_url 实际上包含一些 HTML，而不是 CI 的 base_url() 函数的输出。
正如我在编辑中所说，HTML 代码由 fancybox 附加到 URL，因为我试图将结果（HTML 代码）显示到一个 fancybox 中。这似乎是问题的原因。

【解决方案2】：

尝试在其中对您的 URL 进行硬编码，看看它是否有效。另外，我不确定您要使用代码的 $(this).serializeArray() 部分完成什么。该方法旨在序列化表单的输入。我怀疑您是在“单击”表单以触发提交。

我敢打赌，您正在单击表单中的一个按钮，以根据表单的字段显示某些内容......这就是我下面的示例所假设的。

试试这个：

$("#design-preview").click(function() {
  var data = $(this).parent('form').serializeArray();
  $.ajax({
    type        : "POST",
    cache       : false,
    url         : 'http://domain.info/foo',
    data        : data,
    success : function(data) {
      $.fancybox(data, {
        'type'  : 'iframe',
        'width' : 340,
        'height': 500
      });
    }
  });
  return false;
});

让我知道这是否适合你。

【讨论】：

感谢凯尔，“设计预览”实际上是一个链接。我更正了处理函数，但问题是 fancybox 将 ajax 调用的 HTML 结果添加到链接。对此有什么建议吗？谢谢。