ajax表单提交不起作用答案

【问题标题】：ajax form submit not workingajax表单提交不起作用
【发布时间】：2011-11-18 16:30:26
【问题描述】：

我正在使用 jquery.form.js（版本：2.84），在下面的代码中，我看到它在 $('imageform').ajaxSubmit 之前卡住了。如果我删除 preventDefault，表单将被提交为通常，页面会刷新。当 preventDefault 存在时，我确实看到了 loader.gif，但在服务器端我看不到任何数据，并且警报也从未被触发..

google.maps.event.addDomListener($('photoimg'), 'change', function(e){
            e.preventDefault(); // <-- important
            $("preview").innerHTML = ("<img src=\"loader.gif\" alt=\"Uploading....\"></img>");
            $('imageform').ajaxSubmit({
                target: 'preview'
            });
            alert('after submit');
        });

我也在使用下面的函数，这就是为什么我使用 $('imageform') 而不是 $('#imageform')...

function $(element) {
  return document.getElementById(element);
}

【问题讨论】：

标签： javascript jquery-plugins jquery jquery-selectors

【解决方案1】：

您的 $ 函数破坏了 jQuery 中同一个变量的含义。您可以在 jQuery 中处理很多兼容性问题，或者采取简单的方法：将您的 $ 函数重命名为其他名称，或者直接调用 document.getElementById()，因为您的函数只会让您免于输入该调用。或者，更好的是，使用 jQuery 来处理该调用。

【讨论】：

【解决方案2】：

不，因为您已经用 getElementById 函数覆盖了 $。

$('imageform').ajaxSubmit

将在需要 jQuery 对象的 DOM 元素上执行 ajaxSubmit。您要么需要删除 $，要么使用：

jQuery('#imageform').ajaxSubmit

$("#foo") 与document.getElementById("foo") 不同。

jQuery 函数返回一个 jQuery 对象，该对象包含所有 jQuery 函数，例如 .bind 和 .ajaxSubmit。
document.getElementById，另一方面，返回一个没有任何jQuery功能的裸DOM元素。

jQuery 对象就像一个 DOM 元素数组，所以：

$("#foo")[0] === document.getElementById("foo")

【讨论】：