javascript - 使用ajax提交表单？

Question

我的html代码：

<?php echo form_open('question/submit', $attributes_form)

                <div style="margin-top:15px;" class="control-group">
                    <div class="controls">
                        <button type="submit" class="btn btn-success" id="post-question">提交问题</button>
                        <div id="#loading"></div>
                    </div>
                </div>
            <?php echo form_close();?>

我的查询代码：

<script type="text/javascript">
$(function()
{
    $('#post-question').click(function()
    {
        alert('hello world');   
    });

    $('#question').submit(function()
    {
        $.ajax({
        url:"<?php echo base_url('question/submit');?>",
        type:post,
        beforeSend:function(event){
            $('#loading').html("<img src='<?php echo base_url('assets/img/loading.gif');?>'>");
        },
        success:function(data){
            alert("Success:" + data.result);
            $('#loading').empty();
        },
        error:function(data){
            $('#loading').empty();
            $('#loading').val("提交出错，请重试");
        },
        });
    });
});
</script>

当我点击提交按钮时，页面被重定向到问题/提交，为什么？由于我使用的是 ajax post，我认为页面不应该被刷新或重定向。

Answer 1

您不会阻止事件的默认操作，即提交表单（显然）：

$('#question').submit(function(event) {
    event.preventDefault();
    // ...
});

Answer 2

您需要在提交事件上调用 .preventDefault() 。

$('#question').submit(function (e) {
    e.preventDefault();
    $.ajax({
        data: $(this).serializeArray(),
        url:"<?php echo base_url('question/submit');?>",
        type: 'POST',
        beforeSend:function(event){
            $('#loading').html("<img src='<?php echo base_url('assets/img/loading.gif');?>'>");
        },
        success:function(data){
            alert("Success:" + data.result);
            $('#loading').empty();
        },
        error:function(data){
            $('#loading').empty();
            $('#loading').val("提交出错，请重试");
        }
    });
});

Answer 3

您将要调用 event.preventDefault() 方法来拦截更典型的 html 表单/帖子提交，因为您使用的是这种 ajax 方法