用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發布，因此我認為不應刷新或重定向頁面。

Answer 1

您沒有阻止事件的默認操作，即提交表單（顯然）：

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

Answer 2

您需要在Submit事件上調用.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方法