使用 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>