使用jQuery AJAX检索数据而不重新加载页面

Question

我有这个从MySQL数据库中检索数据的jQuery AJAX代码。它可以在不重新加载页面的情况下工作，问题是它只能在第一次工作。如果我再次提交表单，则整个页面会重新加载。我怎样才能这样做，这样我可以多次提交表单并检索数据而无需重新加载页面？

的jQuery

$(document).ready(function() {
    $('form').on('change', function() {
        $(this).closest('form').submit();
    });

    $('form').on('submit', function(event) {
        event.preventDefault();
        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $(this).serialize(),
            success:function(data) { $('form').html(data); }
        });
    });
});

HTML

<form action="form.php" method="post" id="cars">
    <select name="id">
        <option value="">Selection...</option>
        <option value="1" <?php echo (isset($id) and $id == 1) ? 'selected' : '';?>>Chevy</option>
        <option value="2" <?php echo (isset($id) and $id == 2) ? 'selected' : '';?>>Ford</option>
        <option value="3" <?php echo (isset($id) and $id == 3) ? 'selected' : '';?>>Dodge</option>
    </select> 
</form>

Answer 1

请不要使用提交，而是使用更改功能

<script type="text/javascript">
$(document).ready(function() {
    $('form').on('change', function() {
        $.ajax({
            url: 'form.php',
            type: 'post',
            data: {'id':jQuery('select[name=id]').val()},
            success:function(data) { $('form').html(data); }
        });
    });
});
</script>