Question

页面在表单提交后重新加载，我希望它不会重新加载。更新：通过以下答案我想出了下面的代码。发生的事情是表单正确提交，但页面重新加载。以前，这行代码运行良好：

$(document).ready(function() { 
    $('#poll').ajaxForm(function() { 
        $("#polling_id").load("poll_results.php");
    }); 
});

今天我添加了.htaccess来删除.php扩展名。这可能会影响到这一点吗？

HTML

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></SCRIPT>
</head>
<div class="polling" id="polling_id">
    <br><br>    

    <form id="poll_form" method="POST" action="process-vote.php" />
    <div class="poll_objects">
        <input type="hidden" name="o1" value="<?php echo $option1; ?>" />
        <input type="hidden" name="o2" value="<?php echo $option2; ?>" />
        <input type="hidden" name="o3" value="<?php echo $option3; ?>" />
        <span class="footer_font"><input type="radio" name="radio_1" value="<?php echo $option1;?>" id="radio" /><label for="radio"><?php echo $option1;?></label> </span><br><br>
        <span class="footer_font"><input type="radio" name="radio_1" value="<?php echo $option2;?>" id="radio2" /><label for="radio2"><?php echo $option2;?></label></span><br><br>
        <span class="footer_font"><input type="radio" name="radio_1" value="<?php echo $option3;?>" id="radio3" /><label for="radio3"><?php echo $option3;?></label></span><br><br>
        <div class="float_buttons">
            <input type="submit" name="submit_vote" value="Vote!" class="button" />
            <input type="submit" name="results" value="Poll Results" class="button"/>
        </div>
    </div>
</div>
</form>

jQuery的：

<script> 
    $(document).ready(function() {         
        $.ajax({    
            $('#poll_form').submit(function(e) {
                e.preventDefault();
                // note where the e comes from.
                var a = $(this).serialize();
                $("#polling_id").load("poll-results.php");
            });
        });    
    });
</script>

Answer 1

看起来你没有捕捉到一个事件。

$('#poll_form').submit(function(e) {
   e.preventDefault();
   // note where the e comes from.
   var a = $(this).serialize();
   // now do your ajax stuff here.
});

Answer 2

你也可以把：

<script>
   function validate()
   {
     ...
        blablabla
     ...
     return false; // This cause the submit function to be stopped.
   }
</script>
<form onClick="validate()">

Ajax表单提交重新加载页面

2 个答案: