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投稿を使用しているので、ページを更新したりリダイレクトしたりすべきではないと思います。

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

この ajax アプローチを使用しているため、event.preventDefault() メソッドを呼び出して、より典型的な html フォーム/ポスト送信をインターセプトする必要があります。