我想使用 ajax 更新我网页的一小部分，我如何在 Django 中做到这一点？

Question

基本上我有三个模型

class category(models.Model):
       name = models.CharField(max_length=40) 


class subCategory(models.Model):
       category = models.ForeignKey(category, on_delete= models.CASCADE)
       name = models.CharField(max_length=40)


class product(models.Model):
       name = models.CharField(max_length= 40)
       image = models.ImageField(upload_to="media/upload_to")
       price = models.DecimalField(max_digits=10, decimal_places= 3)
       price_off = models.DecimalField(max_digits=10, decimal_places=3)
       description = models.TextField()
       created_at = models.DateTimeField(auto_now_add=True)
       category = models.ForeignKey(category, on_delete= models.CASCADE)
       sub_category = models.ForeignKey(subCategory, on_delete= models.CASCADE)

这些是我制作的模型现在我必须在给定的模板上应用 ajax 所以我不知道如何开始这是我的图像

当我点击三星时，会显示三星的产品以及其他产品这是我的 index.html

<div id="mobile-list" class="section-container bg-silver p-t-0">
            <!-- BEGIN container -->
            <div class="container">
                <!-- BEGIN section-title -->
                <h4 class="section-title clearfix">
                    <a href="#" class="pull-right">SHOW ALL</a>
                    Mobile Phones
                    <small>Shop and get your favourite phone at amazing prices!</small>
                </h4>
                <!-- END section-title -->
                <!-- BEGIN category-container -->
                <div class="category-container">
                    <!-- BEGIN category-sidebar -->
                    <div class="category-sidebar">
                        <ul class="category-list">
                             {% for data in mc %}
                                 <li class="hit" name="{{ data.name }}" data-name="{{ data.name }}"><a href="#"> {{data.name}}</a></li>
                            {% endfor %}
                        </ul>
                    </div>
<div class="category-detail">
                        <!-- BEGIN category-item -->
                        <a href="#" class="category-item full">
                            <div class="item">
                                {% for data in mobilePhone %}
                                    {% if forloop.counter == 1 %}
                                <div class="item-cover">
                                    <img src="{{data.image.url}}" alt="" />
                                </div>
                                <div class="item-info bottom">
                                    <h4 class="item-title">{{data.name}}</h4>
                                    <p class="item-desc">{{data.description}}</p>
                                    <div class="item-price"> {{data.price}}</div>
                                </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </a>
                        <!-- END category-item -->
                        <!-- BEGIN category-item -->
                        <div class="category-item list">
                            <!-- BEGIN item-row -->
                            <div class="item-row">
                                <!-- BEGIN item -->
                                <div id = "ididid">
                                    {% for data in mobilePhone %}
                                        {% if forloop.counter > 1 %}
                                    <div class="item item-thumbnail">

                                        <a href="product_detail.html" class="item-image">
                                            <img src="{{data.image.url}}" alt="" />
                                        </a>

                                        <div class="item-info">
                                            <h4 class="item-title">
                                                <a href="product_detail.html">{{data.name}}</a>
                                            </h4>
                                            <p class="item-desc">{{data.description}}</p>
                                            <div class="item-price">{{data.price}}</div>
                                            <div class="item-discount-price">{{data.price_off}}</div>
                                        </div>
                                    </div>
                                    {% endif %}
                                        {% endfor %}
                                </div>
                                <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                                <script>
                                        $(".hit").on("click", function(ev)
                                        {
                                            ev.preventDefault();
                                                var id = $(this).attr("id");
                                                console.log(id)
                                                $.ajax({
                                                    type : "GET",
                                                    url : '${}',
                                                    data : {
                                                        id : id
                                                    },
                                                    complete: function(data){
                                                        {#console.log(data, response.name, response.image, response.description);#}

                                                        $('ididid').html(data.responseText)

                                                    }
                                                })
                                        })
                                </script>
                               </div>

这是我的index.html我试过了但是没用

Answer 1

看看https://htmx.org/。

还有一个 Django 包：https://github.com/adamchainz/django-htmx。