In CI 3, how do i get data from controller with AJAX in view?

Question

Help guys, i've been trying to get data from controller in the form of json data and displaying the data in the view based on onchange dropdown selection. Here is part of my controller

        public function ajax_cerai_view()
    {
        $dataUser=array('NAMAuser'=> $this->m_pegawai_cerai->get_NAMA(),
        'NIPuser'=> $this->m_pegawai_cerai->get_NIP(),
        'PANGGOLuser'=> $this->m_pegawai_cerai->get_PANGGOL(),
        'JABKERuser'=> $this->m_pegawai_cerai->get_JABKER(),
        'SATKERuser'=> $this->m_pegawai_cerai->get_SATKER(),
        'AGAMAuser'=> $this->m_pegawai_cerai->get_AGAMA(),
        'ALAMATuser'=> $this->m_pegawai_cerai->get_ALAMAT());
        header('Content-Type: application/json');
        return json_encode($dataUser);
    }
    

Here's my model

<?php

if(!defined('BASEPATH')) exit('No direct script access allowed');

class m_pegawai_cerai extends CI_Model {

    public function __construct()
    {
        parent::__construct();
    }
    
    public function get_NIP()
{
    $q=$this->session->userdata('USERNIP');
    return $q;
}

    public function get_NAMA()
{
    $q=$this->session->userdata('USERNAMA');
    return $q;
}

    public function get_PANGGOL()
{
    $q=$this->db->query("SELECT '('+PT.KODEPANGKAT+') '+PT.PANGKAT AS PANGKAT FROM PEGAWAI P LEFT JOIN VWPANGKATTERAKHIR VWP ON P.PEGAWAIID=VWP.PEGAWAIID LEFT JOIN PANGKAT PT ON VWP.PANGKATID=PT.PANGKATID WHERE P.PEGAWAIID = " . $this->session->userdata('PEGAWAIID'))->row()->PANGKAT;
    return $q; 
}
    public function get_JABKER()
{
    $q=$this->db->query('SELECT NAMAJABATAN FROM PEGAWAI P LEFT JOIN VWJABATANTERAKHIR VWJ ON P.PEGAWAIID=VWJ.PEGAWAIID WHERE P.PEGAWAIID = ' . $this->session->userdata('PEGAWAIID'))->row()->NAMAJABATAN;
    return $q;
}
    public function get_SATKER()
{
    $q=$this->db->query('SELECT SATKER FROM PEGAWAI P LEFT JOIN SATKER S ON P.SATKERID=S.SATKERID WHERE PEGAWAIID = ' . $this->session->userdata('PEGAWAIID'))->row()->SATKER;
    return $q;
}
    public function get_AGAMA()
{
    $q=$this->db->query('SELECT AGAMA FROM PEGAWAI WHERE PEGAWAIID = ' . $this->session->userdata('PEGAWAIID'))->row()->AGAMA;
    return $q;
}
    public function get_ALAMAT()
{
    $q=$this->db->query('SELECT ALAMAT FROM PEGAWAI P WHERE PEGAWAIID = ' . $this->session->userdata('PEGAWAIID'))->row()->ALAMAT;
    return $q;
}

}
?>  

And here's the javascript in my view

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                        <script type="text/javascript">
                        
                        function changetextbox()
                        {
                            $('#untuk').change(function() {
                            if(document.getElementById('untuk').value != "Diri Sendiri")
                        {
                            document.getElementById('NIPField').value='';
                            if(document.getElementById('untuk').value == "Pegawai Lainnya") {document.getElementById("NIPField").disabled=false;}
                            else{document.getElementById("NIPField").disabled=true;}
                            document.getElementById("NamaField").disabled=true;
                            document.getElementById("PanggolField").disabled=true;
                            document.getElementById("JabkerField").disabled=true;
                            document.getElementById("SatkerField").disabled=true;
                            document.getElementById("AgamaField").disabled=true;
                            document.getElementById("AlamatField").disabled=true;
                            
                        }
                            else{
                                $.ajax({
        type: "POST",
        url: "<?php base_url('pegawai/ajax_cerai_view'); ?>",
        success: function(data) {
            alert(data);
        },
        error: function(data) {
            alert(data);
        }
    });
                            document.getElementById("NIPField").disabled=true;
                            document.getElementById("NamaField").disabled=true;
                            document.getElementById("PanggolField").disabled=true;
                            document.getElementById("JabkerField").disabled=true;
                            document.getElementById("SatkerField").disabled=true;
                            document.getElementById("AgamaField").disabled=true;
                            document.getElementById("AlamatField").disabled=true;
                            }
                        });
                        }
                        
                            
                        
                        </script>

But when i run the page and trigger it, the alert not showing the data but a html script data, something along the line

<!DOCTYPE html>
<html lang="en">
<head>


<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>

I thought if i change the ajax url to the exact path without php tag like url: "http://localhost/portalapp/pegawai/ajax_cerai_view" would make it right but now the alert shows "[object Object]", and if i check on the browser inspect>network>response it says

"<h4>A PHP Error was encountered</h4>

<p>Severity: 8192</p>
<p>Message:  str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated</p>
<p>Filename: core/Output.php</p>
<p>Line Number: 457</p>"

I thought it was because the data is null, but i tried to echo the json_encode($dataUser) in the view with php tag it is not null, it gives me json data like {"NAMAuser":"XXX","NIPuser":"XXX","PANGGOLuser":"XXX","JABKERuser":"XXX","SATKERuser":"XXX","AGAMAuser":"XXX","ALAMATuser":"XXX"} . So where did i do wrong? How do i make it right?

UPDATE 1 If i am not using the php tag but using the actual path in ajax script like url: "http://localhost/portalapp/pegawai/ajax_cerai_view", and changing the ajax_cerai_view() controller from return to echo like this

public function ajax_cerai_view()
    {
        $dataUser=array('NAMAuser'=> $this->m_pegawai_cerai->get_NAMA(),
        'NIPuser'=> $this->m_pegawai_cerai->get_NIP(),
        'PANGGOLuser'=> $this->m_pegawai_cerai->get_PANGGOL(),
        'JABKERuser'=> $this->m_pegawai_cerai->get_JABKER(),
        'SATKERuser'=> $this->m_pegawai_cerai->get_SATKER(),
        'AGAMAuser'=> $this->m_pegawai_cerai->get_AGAMA(),
        'ALAMATuser'=> $this->m_pegawai_cerai->get_ALAMAT());
        echo json_encode($dataUser);
    }

and showing in the console the response, not the data like this

$.ajax({
        type: "POST",
        url: "http://localhost/portalapp/pegawai/ajax_cerai_view",
        success: function(response) {
            console.log(response);
        },
        error: function(response) {
            alert(response);
        }
    });

and look at my browser inspect>console it gives me the data along with the error info like this

{"NAMAuser":"XXX","NIPuser":"XXX","PANGGOLuser":"XXX","JABKERuser":"XXX","SATKERuser":"XXX","AGAMAuser":"XXX","ALAMATuser":"XXX"}
<div style="border:1px solid #990000;padding-left:20px;margin:0 0 10px 0;">

<h4>A PHP Error was encountered</h4>

<p>Severity: 8192</p>
<p>Message:  str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated</p>
<p>Filename: core/Output.php</p>
<p>Line Number: 457</p>


    <p>Backtrace:</p>

UPDATE 2 It seems that when i show the data with alert and the alert shows html script data instead of the actual data, it looks like it was the html script data from view php file <?php $this->load->view("_partials/header")?>