Javascript 使用Ajax数据更新html模板

我想用通过

AJAX

调用检索到的数据更新我的

html

模板

我可以在

JS

中获取数据并定义变量。但是，如何从

JS

到

Html

获取值，以更新

Html

中的值

HTML（django）：

主要绩效指标
汽车
车辆详细信息/h5>
汽车制造
0
汽车价格
0
获取详细信息

您是否尝试过jQuery的

text（）

方法？我通过ID更新

0

值。您的CarMake和CarPrice未在span元素中指定

像这样：

汽车制造
0
汽车价格
0

$（函数（）{
var getProduct）=函数（）{
var btn=$（本）；
$.ajax({
url:btn.attr（“数据url”），
键入：“get”，
数据类型：“json”，
成功：功能（数据）{
var CarMake=data.CarMake
var CarPrice=data.CarPrice
$（“#CarMake”）.text（CarMake）；
$（“#CarPrice”）.text（CarPrice）；
}，错误：函数（错误）{
console.log（错误）
console.log（“错误”）
}
});
};
$（“.js获取产品”）。单击（获取产品）；
});

<span class="badge badge-primary badge-pill">0</span>

$(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);
});

    <div class="container">
        <h3>Key Metrics</h3>
        <div class="row">
            <div class="col-sm-4">
                <div class="card text-dark bg-light">
                    <div class="card-header bg-dark text-center text-light"><h4>CARS</h4></div>
                    <div class="card-body ">
                        <h5 class="card-title">Car Details/h5>
                        <!--Starting list group here -->
                        <div class="list-group">
                            <a class="list-group-item d-flex justify-content-between align-items-center list-group-item-action list-group-item-primary">
                                Car Make
                                <span class="badge badge-primary badge-pill">0</span>
                            </a>
                            <a class="list-group-item d-flex justify-content-between align-items-center list-group-item-action list-group-item-danger">
                                Car Price
                                <span class="badge badge-primary badge-pill">0</span>
                            </a>
                        </div>
                        <!--Ends here -->
                    </div>
                    <div class="card-footer bg-secondary border-danger text-right">
                        <a
                            class="btn btn-success btn-sm js-get-product"
                            data-url="{% url 'api-product' object.product_uid %}">Get Details</a>
                    </div>
                </div>
            </div>
        </div>
    </div>