How to display data without html on ajax call? How to display only content on ajax hit without html markup?

what i am trying to do i have to show data on button click in profile dashboard(custom page) ,for this i have created controller file .

class OutstandingPaymentPending extends ControllerBase {
  // callback for learning portal access
  public function GetPendingPayment() {
    /* TO DO
     * Making api dynamic via configuration
     */
    global $base_url;
    $user_id = \Drupal::currentUser()-&gt;id();
    $psid = '';
    $psid_request = \Drupal::request()-&gt;get('ds');
    if (!empty($psid_request)) {
      $psid = $psid_request;
    }
    else {
      $psid = get_psid_by_user_id($user_id);
    }
    // Get outstanding data from api
    $url = OUT_STANDING_API . '?PSID=' . $psid;
    //$url = OUT_STANDING_API . '?PSID=00002449846';
    $access_token = API_ACCESS_TOKEN;
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, array('AccessToken:' . $access_token));
    $response = curl_exec($ch);
    $err = curl_error($ch);
    curl_close($ch);
    $rows = array();
    $result = json_decode($response);

    $result = trim($result, '"');
    if (trim($result) == 'No data found') {
      $rows = array();
    } else {
        $outstanding_result = json_decode($result);
         $course_count = 1;
        $rows = [];
        if (!empty($outstanding_result)) {
        foreach ($outstanding_result as $key =&gt; $value) {
          //if ($outstanding_result-&gt;ResponseCode != 401) {
          $rows[] = array('course_name' =&gt; $outstanding_result[$key]-&gt;CRSNAME,
            'course_validity' =&gt; $outstanding_result[$key]-&gt;VALIDITY,
            'course_type' =&gt; $outstanding_result[$key]-&gt;COURSETYPE,
            'course_installment_date' =&gt; $outstanding_result[$key]-&gt;INSTDT,
            'course_total_outstanding' =&gt; $outstanding_result[$key]-&gt;TOTALOUTSTANDINSTAMT,
          );
          //}
        }
      }
    }

    return array(
      '#theme' =&gt; 'pending_installment_template',
      '#installment' =&gt; $rows
    );
  }
  }


My ajax code is:

//ajax for showing installment payment pending block on click
$(document).on('click', '#gettoptracks', function (e) {
    e.preventDefault();
    $.ajax({
        url: "/outstanding-payment-left",
        context: document.body,
        success: function (data) {
            $("#show-pending-payment").html(data);


        }
    });
    // your statements;
});


On clicking ajax based button its rendering entire page along with data with all html, so js files and css rendering two times in same page .

how i can show only data instead of entire page html which is rendering on page.html.twig?
I have done this in a custom controller before. You don't want to return a render array, because Drupal will take the default action.

Instead, you want to render it to HTML (string) and return that back. Something like this:

$rendered = $this-&gt;renderer-&gt;renderRoot($build_array);
$response = new Response();
$response-&gt;setContent($rendered);
return $response;


As far as the Javascript, here is a generic example using fetch (in a twig file):

  &lt;script&gt;
    fetch("{{ auth_url }}", { credentials: "include" })
      .then(
        function(response) {
          if (response.status !== 200) {
            console.log('Looks like there was a problem. Status Code: ' + response.status);
            return;
          }

          response.text().then(function(data) {
            document.getElementById("authorize-banner").innerHTML = data;
          });
        }
      )
      .catch(function(err) {
        console.log('Fetch Error :-S', err);
      });
  &lt;/script&gt;

  &lt;div id="authorize-banner"&gt;&lt;/div&gt;


You also likely don't want to cache the render array either. You can also greatly simplify the API fetch code by using Guzzle (Client) instead of curl.