按下输入时提交ajax提交表单的问题

Question

我试图在输入字段中提交一些文本，并在不刷新页面的情况下将其输出到同一页面上。但是，这并不是我想做的。我也有一个占位符元素，所以如果我不小心在字段中没有输入任何内容，它不会将占位符文本插入到我的数据库（mysql）中。我遇到的问题是，当我按下回车键时，它会刷新页面，当我试图在成功时获得警报时，它不会提醒我。

-------------------- jQuery的下面------------------

$('[placeholder]').parents('form').submit(function() { 
    $(this).find('[placeholder]').each(function() { 
    var input = $(this); 
    if (input.val() == input.attr('placeholder')) { 
     input.val(''); 
    } 

    }); 

    var input = $('input.to_do').val(); 

    dataList = 'list=' + input; 
    $.ajax({ 
     type: "POST", 
     url: "ajax_table_edit.php", 
     data: dataList, 
     cache: false, 
     success: function(html) 
      { 
       alert(input); 
       //$('.to_do_list_').html(data); 
       //$('.n').hide(); 
      } 
    }); 
}); 

-------------------------- html --------------------

<form action='#' method='post' > 
<input type="text" class="to_do shadow" placeholder="enter text"/> 
</form> 

感谢您的时间！

Answer 1

阻止默认事件行为：

$('[placeholder]').parents('form').submit(function(event) { 
    $(this).find('[placeholder]').each(function() { 
    var input = $(this); 
    if (input.val() == input.attr('placeholder')) { 
     input.val(''); 
    } 

    }); 

    var input = $('input.to_do').val(); 

    dataList = 'list=' + input; 
    $.ajax({ 
     type: "POST", 
     url: "ajax_table_edit.php", 
     data: dataList, 
     cache: false, 
     success: function(html) 
      { 
       alert(input); 
       //$('.to_do_list_').html(data); 
       //$('.n').hide(); 
      } 
    }); 

    event.preventDefault(); 
}); 

Answer 2

将return false添加到函数的底部，以便页面不执行默认提交操作。

像这样：

$('[placeholder]').parents('form').submit(function() { 
    $(this).find('[placeholder]').each(function() { 
    var input = $(this); 
    if (input.val() == input.attr('placeholder')) { 
     input.val(''); 
    } 

    }); 

    var input = $('input.to_do').val(); 

    dataList = 'list=' + input; 
    $.ajax({ 
     type: "POST", 
     url: "ajax_table_edit.php", 
     data: dataList, 
     cache: false, 
     success: function(html) 
      { 
       alert(input); 
       //$('.to_do_list_').html(data); 
       //$('.n').hide(); 
      } 
    }); 

    return false; 
});