jQuery.get 在 jQuery 提交事件中失败答案

【问题标题】：jQuery.get fails inside jQuery submit eventjQuery.get 在 jQuery 提交事件中失败
【发布时间】：2013-04-23 19:54:15
【问题描述】：

我过去曾成功使用过$.get，但无法使其在 jQuery 提交事件中工作。根据 jQuery 文档，只要您返回 false，submit 事件就会拦截表单的提交事件并阻止 HTML 表单动作发生。我已经验证了这个作品。在下面的代码中，我使用了两次$.get（一次在事件处理程序之前，然后在其中）。它在第一种情况下效果很好，但在提交事件中失败了。

test.php 代码：

<?php
$handle = $_GET['handle'];
echo($handle);
?>

client.php 代码：

<div>
<form id="message_box_form" style="height:100px;width:300px" method="get" action="../phpDB/test.php">
    <textarea id="message_box" style="height:30px;width:250px;" type="text" name="messagecontent"></textarea>
    <input id="share_button" name="share_button" type="submit" value="Share" />     
</form>
</div>

<script type="text/javascript">
jQuery(document).ready(function($) {

    $.get("../phpDB/test.php",{handle:'nightstalker'}, function(data){              
        alert(data);    // This works fine  
    });

    $('#message_box_form').submit( function() {
        alert('jQuery submit handler called');   //This happens
        $.get("../phpDB/test.php",{handle:'rodbender'}, function(data){  
            alert(data);    // This NEVER happens
            return false;
        });
    });
});
</script>

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

您的return false; 放错地方了：

$('#message_box_form').submit( function() {
    alert('jQuery submit handler called');   //This happens
    $.get("../phpDB/test.php",{handle:'rodbender'}, function(data){  
        alert(data);    
    });
    return false; // should in the callback of submit.
});

或者你可以使用e.preventDefault();:

$('#message_box_form').submit( function(e) {
    e.preventDefault();
    alert('jQuery submit handler called');   //This happens
    $.get("../phpDB/test.php",{handle:'rodbender'}, function(data){  
        alert(data);    
    });
});

【讨论】：