javascript - 使用 jquery 阻止表单提交的问题

Question

我希望在按下 Enter 键时执行基于 jquery 的 ajax 表单提交。显然，这涉及停止正常的表单提交过程。我的表单由一个输入字段组成。这是代码:

<script type="text/javascript">
$(document).ready(function() {
    // add vid ajax
    $.ajaxSetup({
        cache:false;
    });
    var ajax_load = '<div class="displayBox">Adding url...</div>';
    var loadUrl = 'ajax/add';

    $("#vidForm").submit(function(){
        e.preventDefault();
        alert("hello");
        /*$("body").html(ajax_load)
        .load(loadUrl,{url:$("#addurl").value},function(responseText){
            $("#videos").append(responseText);
        });*/
        return false;
    });

});
</javascript>
...
<form id="vidForm" action="ajax/">  
    <input id="addurl" name="addurl"/>
</form>

我希望上面的内容提交到“ajax/add”，但事实并非如此，而是向“ajax”提交完整的 http 请求，这是默认行为(至少在 Chrome 中)。

我做错了什么？

Answer 1

作为一般规则，任何 JavaScript 错误都可能导致与根本没有 JavaScript 相同的行为，这就是您所看到的......默认由于脚本错误而导致的提交行为。我概述了以下问题:

您的结束标记已关闭:

</javascript>

应该是:

</script>

<小时/>

此外，对象文字不应该有 ; 作为属性，因此请更改:

$.ajaxSetup({
    cache:false;
});

致:

$.ajaxSetup({
    cache:false
});

<小时/>

最后，删除这个:

e.preventDefault();

您的 return false 已经解决了这个问题(并且由于缺少参数，无论如何都会出错，如 TJ 的回答所示)。