无法使用jQuery Ajax加载页面的div

Question

这是我的代码

查看页面“ ques”：-

<input type="hidden" id="h3" value="<?php echo $t;?>">
<script>

var seconds =document.getElementById('h3').value;

function a() 
{
    var minutes = Math.round((seconds - 30)/60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) 
    {
        remainingSeconds = "0" + remainingSeconds;  
    }
    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
    if (seconds == 0) 
    {
        clearInterval(countdownTimer);
        alert('Time Out');

        window.location.href="result.php";
    } 
    else 
    {
        seconds--;
    }
}

var countdownTimer = setInterval('a()', 1000);

function b()
{
  window.location.href="result.php";
}

</script>
<script src="jquery.js"></script>
<script type="text/javascript">

// Ajax post
$(document).ready(function() {
    $('#f input').on('change', function() {
        var ans=$('input[name="r"]:checked', '#f').val();
    });

    $(".submit").click(function() {
        jQuery.ajax({
            type: "POST",
            url: "http://localhost/ci/index.php/controller_q/quchng",
            data: {ans:'ans'},
            success: function() {
                $('#i').innerHTML();
            }
        });
    });
});
</script>
<div id="i">
<?php $a=1; ?>

Time left- <span id="countdown" class="timer"></span>
Q: <?php echo $qno['ques'.$a];?>
<form id="f">
<input type="radio" name="r5" id="r1" value="<?php echo $qno['a'.$a];?>"><?php echo $qno['a'.$a];?>
<br>
<input type="radio" name="r5" id="r2" value="<?php echo $qno['b'.$a];?>"><?php echo $qno['b'.$a];?>
<br>
<input type="radio" name="r5" id="r3" value="<?php echo $qno['c'.$a];?>"><?php echo $qno['c'.$a];?>
<br>
<input type="radio" name="r5" id="r4" value="<?php echo $qno['d'.$a];?>"><?php echo $qno['d'.$a];?>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;<button id="b" class="submit" value='+'>Save & Next</button>
<input type="hidden" id="h" value="<?php print_r($qno);?>">
<input type="hidden" id="h2" value="<?php echo $a;?>">
</form>
</div>

这是我的控制器页面：

function fexam()
{
    $a=$this->input->get();
    $d=$a['val'];
    $this->load->model('model_q');
    $no=$this->model_q->checktest($d);
    if($no==1)
    {
        $t=$this->model_q->time();
        $m=$this->model_q->qno();
        $no=$this->model_q->selectques($d,$m);
        $data=array('t'=>$t,'qno'=>$no);
        $this->load->view('ques',$data);
    }
    else
    {    

    }
}

function quchng()
{
    $ans=$this->input->post('ans');
    echo $ans;
}

但是，当我单击按钮时，它将我重定向到给定URL链接“ quchng”的控制器函数fexam() 。 请告诉我在哪里需要编辑以解决此问题。

Answer 1

编辑：还可以为动态事件更新单击功能，或将此脚本移动到页面底部，它肯定可以正常工作：

$(document).on("click",".submit",function() {
    alert("Worked")
        jQuery.ajax({
            type: "POST",
            url: "http://localhost/ci/index.php/controller_q/quchng",
            data: {ans:'ans'},
            success: function() {
                $('#i').innerHTML();
            }
        });
    });

将您的按钮更新为键入按钮，因为默认情况下它将其作为“提交”：

<button type="button" id="b" class="submit" value='+'>Save & Next</button>

希望能奏效

Answer 2

您可以使用 ：

<form id="f" onsubmit="return false;">

data: {ans:'ans'}应该像

data: {ans:ans},