.ajax() 按下 ENTER 后刷新页面答案

【问题标题】：.ajax() refreshes the page after ENTER is hit.ajax() 按下 ENTER 后刷新页面
【发布时间】：2012-02-19 02:51:29
【问题描述】：

我正在使用 ajax 使用新文件夹更新数据库，但在按下 ENTER 后会刷新页面。在我的表格上我有onkeypress="if(event.keyCode==13) savefolder();" 这是我拥有的javascript代码：它的作用基本上是在您按Enter键后调用函数savefolder，savefolder然后通过ajax发送请求以将文件夹添加到db。问题是它刷新页面......我希望它保持在同一页面上。有什么建议么？谢谢

<script>


 function savefolder() {

var foldername= jQuery('#foldername').val(),
    foldercolor= jQuery('#foldercolor').val();
//  ajax request to add the folder
            jQuery.ajax({   
                type: 'get',
                url: 'addfolder.php',
                data: 'foldername=' + foldername + '&foldercolor=' + foldercolor,       
                beforeSend: function() { alert('beforesend');}, 
                success: function() {alert('success');}
            });

return false;
}
</script>

【问题讨论】：

为什么e 声明了两次（在doc.ready() 和window.event 中），而return false; 在savefolder() 的末尾应该（我想）取消表单提交，如果它是这样附加的。您发布的内容没有严格意义上的意义（doc.ready() 块的结尾在哪里？）。
另外，ajax 不运行往返；事实上，您的 submit 处理程序不会取消 submit 事件。我没有见过像你这样的方法（也许它是特定于 IE 的？），我看不到你在哪里声明 submit 处理程序。
@JaredFarrish 他在表单标签上定义了一个inline onkeypress 事件...
@Xander - 啊，我明白了。这种方法与提交处理程序有什么特别的原因吗？（真的，我在想……）
@JaredFarrish 通常避免使用 HTML 中的内联事件绑定，因为您将 HTML 紧密耦合到 JS。不过，没有什么能阻止你。是的，通常标准方法是附加到表单的提交事件 - 至少我通常这样做......

标签： javascript jquery ajax

【解决方案1】：

这是有效的：

<form>
    <input type="submit" value="Enter">
    <input type="text" value="" placeholder="search">
</form>

function savefolder() {
    var foldername= jQuery('#foldername').val(),
        foldercolor= jQuery('#foldercolor').val();

    jQuery.ajax({   
        type: 'get',
        url: '/echo/html/',
        //data: 'ajax=1&delete=' + koo,       
        beforeSend: function() {
            //fe('#r'+koo).slideToggle("slow");
        },
        success: function() {
            $('form').append('<p>Append after success.</p>');
        }
    });

    return false;
}

jQuery(document).ready(function() {
    $('form').submit(savefolder);
});

http://jsfiddle.net/TFRA8/

您需要检查在处理过程中是否有任何错误（Firebug 或 Chrome 控制台可以提供帮助）。就目前而言，您的代码格式不正确，因为$(document).ready() 从未在您包含在问题中的代码中关闭。

【讨论】：

感谢贾里德。不幸的是，小提琴在我的页面上仍然可以刷新。页面上有另一个表单，我的输入框在里面。我想我需要把它从表格中取出，然后它应该可以工作。
我会放弃onsubmit 的onkeypress 事件方法，因为这是由enter 按键以及submit 输入元素点击和AFAICT 触发的，你除了那个，我什么也没做。我也不会使用内联事件处理程序，即不要使用onsubmit="return saveFolder()"，而是使用$('form').submit(handler...)。没有看到实际的代码和标记，我不知道该说什么，除非有一个未捕获的错误或诸如此类的“取消”代码执行并允许表单继续提交。

【解决方案2】：

提交表单时只需stop the propagation of the event

jQuery(document).ready(function($) {
  $("#whatever-form-you-are-pulling-your-values-from").submit(function(event) {
    var foldername = $('#foldername').val();
    var foldercolor = $('#foldercolor').val();

    event.stopPropagation();

    //  ajax request to add the folder
    $.ajax({
      type: 'get',
      url: '../addfolder.php',
      data: 'ajax=1&delete=' + koo,       
      beforeSend: function() { fe('#r'+koo).slideToggle("slow"); }, 
      success: function() {  }
  });
});

【讨论】：

【解决方案3】：

由于默认情况下在表单上输入按钮会提交表单，因此您不仅需要使用自己的代码处理此问题，还需要在之后取消事件。

试试这个代码：

onkeypress="if(event.keyCode==13) {savefolder(); return false;}"

onkeypress 事件将返回 javascript 的值，并且只有在它返回 true 时才继续它的事件。

【讨论】：