javascript - AJAX 请求复制整个页面

Question

我正在尝试实现链式依赖下拉组合框选择。我有一个“类别”HTML 组合框，一旦其中的值发生更改，就会出现另一个组合框来选择子类别，依此类推，直到选择最里面(最具体)的类别。因此，每当组合框中的值发生更改时，我都会触发一个 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");