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

Question

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

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>

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

Retrieving Data with jQuery AJAX Without Reloading Page

jquery

ajax

forms

submit

reload

jQuery

HTML