CI中的Ajax问题。 获取数据但JQuery显示错误

Question

I have the following code

<?php
$arr=array();
$arr=$this->session->ques;
if(isset($this->session->username))
{
 echo '<div id="instruction">
      Welcome to Exam
     </div>';
 echo '<div id="questdiv">
       Start Now
     </div>';   
}
?>
$(document).ready(function(){
$("#questdiv").click(function()
{
    $("#instruction").hide();
    $.ajax({
      type:"post",
      url:"<?php echo base_url();?>"+"candidate/nextques",
      dataType:"json",
      data:{val: <?php echo json_encode($arr);?>},
      success:function(res){
      if(res)
      {
       $("#questdiv").append('<span>'+res[0]['question']);
       $("#questdiv").append('<span>'+res[0]['option1']);
       $("#questdiv").append('<span>'+res[0]['column2']);
       $("#questdiv").append('<span>'+res[0]['column3']);
       $("#questdiv").append('<span>'+res[0]['column4']);
      }
    },
    error: function(res,status,error) {
        var err = res.responseText;
      alert(res.Message);
      alert(status);
      alert(error);
    }
    }); 
  });   
});
</script>

In this code, I have two divs. I want that on clicking the div questdiv, AJAX should fire, get the values from controller-model and append some children inside the div.

Although data is fetched from the database (as shown by the network debugging), but preview also shows the above two divs due to which I am getting JSON parsing error.

[{"sno":"1","examcode":"PHP-101","question":"What is PHP?","image":"1-1.jpg","option1":"scripting language","image1":"1-2.jpg","option2":"programming language","image2":"1-3.jpg","option3":"both","image3":"1-4.jpg","option4":"none","image4":"1-5.jpg","correctans":"d58abf157fec3d16bf921e97966c9e57"}]
Welcome to Exam
Start Now

I am not able to figure out why I am getting parsing error when from the controller, I am getting valid JSON data only?

And if Welcome to Exam and Start Exam are creating problems, then how to solve it?

Answer 1

You should have separate controller methods, one that renders the page with divs, and one that only returns your json object. They way you are doing it, you won't have a valid json object because the divs are rendering in there as well (because it is essentially re-rendering the page on ajax call).

Example:

class Some_controller {

    public function index() {
        $this->load->view('someview');
    }

    public function json() {
        $array = array('123', '456');
        echo json_encode($array);
    }

}

Someview:

<script>
    $(document).ready(function () {
        $('#doAction').on('click', function (e) {
            e.preventDefault();
            $.ajax({
                type: "get",
                url: "<?php echo base_url(); ?>some_controller/json",
                dataType: "json",
                success: function (res) {
                    console.log(res);
                }
            });
        });
    });
</script>
<div><a id="doAction" href="javascript:void()">Some div</a></div>