Assign value to Paragraph or P tag through jQuery for the data obtained from PHP

Question

I need to set the text of Paragraph or P tag to the value obtained though AJAX. So I have the HTML page somewhat like this where I have declared the paragraph tab.

<p class="card-text">Client Type<p id="Client_Type" name = "Client_Type"></p></p>

Onclick of the button I am making the AJAX call to HOME_CARD.PHP page. The PHP is working properly and its returning me the data to jQuery. When I use console.log(data); it displays me all the data correctly.

$.ajax({
  url: "Home_Card.php",
  method: "POST",
  data: {
    search_client_id: search_client_id
  },
  success: function(data) {
    console.log(data);
    $('#Client_Type').val(data.CLIENT_MNEMONIC);
    //$('#Client_Type').text("HELLO");
    //$('#Client_Type').attr(data.CLIENT_MNEMONIC);
    //$('#card').show();
    //$('#Client_Type').("HELLOE");
  }
});

So I tried using val function to assign the value in CLIENT_TYPE to p tag in HTML page but its not assigning. When I use $('#Client_Type').text("HELLO"); it assigns the value "HELLO" properly so I am guessing nothing wrong with my program.

I wanted to know is there any other way of assigning the value to paragraph tag in jQuery?

How to assign the specific value obtained from PHP in JSON format to paragraph p tag using jQuery.

Answer 1

During the AJAX call, I did not mention the type of data I getting in return:

datatype: "json",

 $.ajax({
  url: "Home_Card.php",
  method: "POST",
datatype: "json",

  data: {
    search_client_id: search_client_id
  },
  success: function(data) {
    console.log(data);
    $('#Client_Type').val(data.CLIENT_MNEMONIC);
    //$('#Client_Type').text("HELLO");
    //$('#Client_Type').attr(data.CLIENT_MNEMONIC);
    //$('#card').show();
    //$('#Client_Type').("HELLOE");
  }
});