ajax 更新html data,javascript - Update html template with Ajax data - Stack Overflow

I'd like to update my html template with the data I have retrieved through an AJAX call.

I can fetch the data and define variables in JS. However, how do I get the value from JS to Html, to update the value within the Html "pill"?

0

i.e. change the value from 0 to the value that is defined in var CarPrice = data.carPrice; ?

JS:

$(function () {

var getProduct) = function () {

var btn = $(this);

$.ajax({

url: btn.attr("data-url"),

type: 'get',

dataType: 'json',

success: function (data){

var CarMake = data.carMake

var CarPrice = data.carPrice

$("#CarMake").val(CarMake);

$("#CarPrice").val(CarPrice);

}, error: function(error){

console.log(error)

console.log("error")

}

});

};

$(".js-get-product").click(getProduct);

});

HTML (django):

Key Metrics

CARS

Car Details/h5>

Car Make

0

Car Price

0

class="btn btn-success btn-sm js-get-product"

data-url="{% url 'api-product' object.product_uid %}">Get Details