使用 Ajax 数据更新 html 模板

Question

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"?

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

ie 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):

    <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>

Answer 1

Have you tried jQuery's text() method? I update the 0 value by ids. Your CarMake and CarPrice not assigned in span elements.

like this:

<a class="list-group-item d-flex justify-content-between align-items-center list-group-item-action list-group-item-primary">
    Car Make
    <span id="CarMake" 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 id="CarPrice" class="badge badge-primary badge-pill">0</span>
</a>

$(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").text(CarMake);
            $("#CarPrice").text(CarPrice);
         }, error: function(error){
         console.log(error)
         console.log("error")
         }
      });
   };

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