AJAX 請求復制整個頁面

Question

我正在嘗試實現鏈式依賴下拉 combobox 選擇。 I have a 'category' HTML combobox and once the value in there is changed, another combobox should appear to select a subcategory and so on until the innermost (most specific) category is selected. 因此，每當 combobox 中的值發生更改時，我都會觸發 AJAX GET 請求，該請求應該只重新加載頁面的該位，但是目前我的代碼只是復制整個頁面，而不是僅僅創建一個新的<select> 。

這是我的 Django 模板和 jQuery 代碼：

{% extends 'pages/base.html' %}

{% block content %}
<h1>Create a product</h1>
<form method='POST' id='productForm' data-products-url="{% url 'products:ajax_load_categories' %}">
    {{ form.as_p }}
</form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$("#id_category").change(function () {
  var url = $("#productForm").attr("data-product-url");
  var categoryId = $(this).val();

  $.ajax({                       
    url: url,                    
    data: {
      'category': categoryId
    },
    success: function (data) {
      $("#productForm").append(data);
    }
  });
});
</script>
{% endblock %}

這是我的看法：

def load_categories(request):
    category_id = request.GET.get('category')
    subcategories = Category.objects.get(id=category_id).get_children()
    return render(request, 'products/category_dropdown_list_options.html', {'subcategories': subcategories})

這是我的urls.py ：

app_name = 'products'
urlpatterns = [
    path('create/', product_create_view, name='product-create'),
    path('ajax/load-categories/', load_categories, name='ajax_load_categories')
]

這是我正在嘗試創建的 HTML 的一小部分：

products/category_dropdown_list_options.html

<select>
    {% for subcategory in subcategories %}
        <option value="{{ subcategory.pk }}">{{ subcategory.name }}</option>
    {% endfor %}
</select>

Answer 1

更改此var url = $("#productForm").attr("data-product-url"); 到var url = $("#productForm").attr("data-products-url");