时间戳

首页 > 解决方案 > JQuery，如何传递 slug 变量

javascript - JQuery，如何传递 slug 变量

问题描述

我想知道如何将 slug 变量传递给 JQuery/javascript。

我有一个包含项目的数据表，每行有两个按钮，一个 (1) 使用 Django 创建产品，另一个 (2) 应该使用 JQuery / JS 创建产品。

要创建一个带有按钮 1 的产品，我发现它是直截了当且解释清楚的。

我想使用 JQuery/JS 对按钮 2 执行相同的操作。

按钮 1

 <a href="{% url 'products-create' object.products_uid %}"><button type="button" class="btn btn-secondary"><i class="fa fa-pencil"></i></button></a>

带有网址路径：

path("products/<uuid:slug>/create/", ProductsCreateView.as_view(), name="products-create"),

视图.py

class ProductsCreateView(CreateView):
    model = Products
    template_name = "products_create.html"
    slug_field = "products_uid"

按钮 2

 <button class="btn btn-secondary js-create-button" data-url="{% url 'api-products-create' object.products_uid %}" type="button"><span class="fa fa-pencil"></span></button>

带有网址路径：

path('api/products/<uuid:slug>/create/', ProductsCreateView.as_view(), name="api-products-create"),

用js（截断函数）

$(function () {

    var createProduct = function() {
        var slug = '{{ $slug }}';  /* some code/function that gets hold of the slug */
        const url = `/api/v1/products/${slug}/create/`;
       
        $.get(url)
        .done(function pollAsyncResults(data) {
          // bind pollAsyncResults to itself to avoid clashing with
          // the prior get request
          context: this
          // see the URL setup for where this url came from
          const pollAsyncUrl = `/api/products/poll_async_results/${data.task_id}`;
        })
    };

   $(".js-create-button").click(createProduct);

});

标签： javascriptpythonjquerydjango

解决方案

在@31piy 对这个 SO 帖子的回答的帮助下：How to console.log value of a data-attribute in jquery?

要选择所有具有 data-group 属性的元素，可以遍历选择器 [data-group] 选择的元素，并在迭代中使用 data 方法获取该属性的值。

请看下面的例子：

$('[data-group]').each(function() {
  console.log($(this).data('group'));
})

我发现const url可以表示为：

const url = $(this).data('url');

在控制台中登录时，我会得到我想要的字符串

/api/products/7d49e267-f35d-4161-8eb5-0a815abbb083/create/

因此，完整的代码将变为：

$(function () {

    var createProduct = function() {
        const url = $(this).data('url');
       
        $.get(url)
        .done(function pollAsyncResults(data) {
          // bind pollAsyncResults to itself to avoid clashing with
          // the prior get request
          context: this
          // see the URL setup for where this url came from
          const pollAsyncUrl = `/api/products/poll_async_results/${data.task_id}`;
        })
    };

   $(".js-create-button").click(createProduct);

});

推荐阅读