使用ajax提交表单?

时间:2013-10-01 01:34:44

标签: javascript jquery ajax

我的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帖子,我认为不应刷新或重定向页面。

3 个答案:

答案 0 :(得分:1)

您没有阻止事件的默认操作,即提交表单(显然):

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

答案 1 :(得分:1)

您需要在提交事件上调用.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("提交出错,请重试");
        }
    });
});

答案 2 :(得分:0)

您将要调用event.preventDefault()方法来截取更典型的html表单/帖子提交,因为您正在使用此ajax方法