PHP Ajax request recieves whole html code in response instead of my html tag

Question

  Controller:

    public function get_sub_category()
        {
            $id= $this->input->post('id');
            $rec = $this->user_m->get_sub_categories($id);
            $html="";
            if(!empty($rec)) {
                $html .= '<select  name="category" id="category" required />
                <option value="">--Select Sub Vendor--</option>';
                foreach($category as $cat) { 
                    $html .= '<option value="'.$cat->vendor_id.'">'.$cat->vendor_name.'</option>';
                } 
                $html .= '</select>';
            }
            echo $html;
        }
     Model:
     public function get_sub_categories($id)
        {
            $this->db->select('*');
            $this->db->from('vendor_type');
            $this->db->where('vendor_parent',$id);
            $this->db->order_by('vendor_id','DESC');
            $query = $this->db->get();
            return $query->result();
        }

 View:
  <div class="top-row">
            <div class="field-wrap">

              <select  name="category" id="category" required onChange="get_subcategory(this.value);" />
              <option value="">--Select Vendor--</option>
              <?php foreach($category as $cat) { ?>
              <option value="<?php echo $cat->vendor_id; ?>"><?php echo $cat->vendor_name; ?></option>
              <?php } ?>
              </select>
            </div>

            <div class="field-wrap sub_category">

            </div>
          </div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript">

    function get_subcategory(id) {

        $.ajax({
            type: "POST",
            url:"<?php echo base_url();?>user/get_sub_category/",
            data: {id:id},
            dataType:"html",
            success: function(response) {
                    alert(response);

            }
        });

    }
</script>

In response It alert as my html whole page

This is first time I occurred this error for ajax... Couldnt found any proper solution. Page not contained any extra css or extra js. Only 1 js file I used. I removed mimetype from my ajax then also same I am getting same response. I used exit() function at the end of controller but still i was same response.possibilities Im not confirm that jquery_min_js that I am using is right or wrong..response in controller is right or wrong..

This is first time I occurred this error for ajax... Unable to found solution. tried lots of time. even datatype and response type is same. This is first time I occurred this error for ajax... Couldnt found any proper solution. Page not contained any extra css or extra js. Only 1 js file I used. I removed mimetype from my ajax then also same I am getting same response. I used exit() function at the end of controller but still i was same response.possibilities Im not confirm that jquery_min_js that I am using is right or wrong..response in controller is right or wrong.. This is first time I occurred this error for ajax... Unable to found solution. tried lots of time. even datatype and response type is same.

Answer 1

If by "I Receive my html page" you mean to receive an entire HTML page into the response variable, I think it has to be with the dataType property you've applied.

According to the documentation, dataType will convert your response into a proper text/html response.

https://api.jquery.com/jQuery.ajax/

dataType (default: Intelligent Guess (xml, json, script, or html)) Type: String
The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response

Give it a try without mimeType override and dataType value to "text" for a plain text string, then adapt these types to suit your needs.