title: Console log not printing response after successful ajax call
body: <p>I have weird situation, I have made a ajax call and it's working fine, the Status is 200 and I am getting my data from <code>php</code> function correctly. But it's not printing in <code>console.log</code> and not appending to my <code>&lt;select name"a" id="section_id"&gt;..Response should append here..&lt;/select&gt;</code> tag.</p>
  
  <p><strong>script</strong></p>
  
  <pre><code>$("#student_class").change(function () {
  
      var class_id = this.value;
      var url = $("#student_class").attr("data-base_url");
  
    $.ajax({
  
        url: url,
        type: 'POST',
        data: { class_id: class_id},
        dataType: 'JSON', 
  
        success: function(response) {
   // This console.log(response) not printing anything.
          console.log(response);
          if(response.success === true){
              $("#student_class_section_id").append(response.html_string);
          }
        }
  
      });
  });        
  </code></pre>
  
  <p><strong>PHP</strong></p>
  
  <pre><code>public function show_class_sections(){
  
      $class_id = $_POST['class_id'];
  
      $data = array("success" =&gt; false, "html_string" =&gt; "");
  
      $result = array();
      $result = $this-&gt;admin_forms-&gt;get_class_sections($class_id);
  
      if(!empty($result)){
          $data['success'] = true;
          $data['html_string'] = $result;
      }
  
  
      echo json_encode($data);
  }
  </code></pre>
  
  <p><strong>Images of Ajax Response</strong></p>
  
  <p><a href="https://i.stack.imgur.com/CEHJH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CEHJH.png" alt="enter image description here"></a></p>
  
  <p>Why there it's printing the whole html page After success of request</p>