CI框架中Ajax异常：已获取数据但jQuery报JSON解析错误

Let's break down your problem and walk through the solution step by step.

What's Happening? #

You've built a CodeIgniter setup where clicking the #questdiv triggers an Ajax call to fetch question data from your controller. While the database is returning valid data, your Ajax response is getting polluted with the text Welcome to Exam and Start Now from your view's divs. This extra content breaks jQuery's JSON parsing because the response is no longer valid JSON.

Why This Is Happening #

The core issue is that your controller method candidate/nextques isn't returning only JSON. When the Ajax request hits this method, your view's echo statements (the two divs) are still being output alongside the JSON data. CodeIgniter doesn't automatically stop execution after returning JSON, so any subsequent output (like view content) gets tacked onto the response.

How to Fix It #

We need to ensure the controller returns pure JSON, and prevent the view's extra content from being sent during Ajax requests. Here's how:

1. Clean Up Your Controller Method
   Update your nextques method to explicitly return JSON and halt execution immediately after, so no extra content gets added. You can do this two ways:

   Using raw PHP (simple and direct):

   public function nextques() {
       // Fetch your question data from the model
       $question_data = $this->your_question_model->get_next_question();
       
       // Set the correct content type header
       header('Content-Type: application/json');
       // Encode and output the JSON
       echo json_encode($question_data);
       // Stop all further execution to avoid extra output
       exit;
   }
   

   Or using CodeIgniter's Output class (more framework-compliant):

   public function nextques() {
       $question_data = $this->your_question_model->get_next_question();
       
       $this->output
           ->set_content_type('application/json')
           ->set_output(json_encode($question_data));
   }
   

   Either way, this ensures only valid JSON is sent back in the response.

2. Prevent View Output During Ajax Requests
   Modify your view code to only echo those divs when the request isn't an Ajax call. CodeIgniter has a helper method to check this:

   <?php 
   $arr = $this->session->ques ?? []; 
   if(isset($this->session->username)) {
       // Only render the divs if this isn't an Ajax request
       if (!$this->input->is_ajax_request()) {
           echo '<div id="instruction"> Welcome to Exam </div>';
           echo '<div id="questdiv"> Start Now </div>';
       }
   } 
   ?>
   

   This way, when the Ajax request comes in, those divs won't be output and won't pollute your JSON response.

3. Improve Ajax Error Handling
   Your current error handler tries to access res.Message, which doesn't exist in the error response object. Update it to show the actual response text, which will help with debugging:

   error: function(res, status, error) {
       alert('Response Text: ' + res.responseText);
       alert('Status: ' + status);
       alert('Error: ' + error);
   }
   

Final Notes #

Once you implement these changes, your Ajax response will be pure JSON, and jQuery will be able to parse it without issues. The key is ensuring your controller's Ajax endpoint only returns the data it's supposed to, with no extra view content attached.

内容的提问来源于stack exchange，提问作者ITSagar