使用 javascript-ajax Django 在 <a> html 中获取特定值

Posted 2023-02-24

【中文标题】使用 javascript-ajax Django 在 <a> html 中获取特定值

【英文标题】：Get an specific value in <a> html with javascript-ajax Django

【发布时间】：2016-01-28 21:57:24

【问题描述】：

我正在使用 Django 和 Python 3。

我的 html 代码中有这个：

% for category in categories() %
    <li class="c-menu__item fs-xsmall">
        <a href="#" id="next-category">
             category
        </a>
    </li>
    <input type="hidden" value=" category.code " id="category-id">
% endfor %
<div class="col-xs-4" id="sub_categories">
</div>

列出了几个类别。

我的脚本中有这个：

$( document ).on( 'click', '#next-category', function(e)
    e.preventDefault();
    $.ajax(
        url : 'product_category/addAjax',
        type : 'POST',
        data : 
            category: $( '#category-id').val(),
        ,
    )
    .fail(function( jqXHR, textStatus, errorThrown )
        console.log('FAIL');
    )
    .done(function(data)
        console.log('DONE');
        $('#sub_categories').prop('innerHTML',data["sub_categories"]);

    );
    return false;
);

当我打印：$('#category-id').val() 时，我总是得到相同的值。无论我选择列出的第一个类别还是最后一个类别，我都会得到相同的值。我不知道出了什么问题。

【问题讨论】：

第二个怎么选？

你打印了很多<input ... id="category-id">，但所有的都有相同的id

有点困惑您要完成的工作.. 但是如果您尝试将 category.code 与链接相关联.. 这样当点击链接时您会获得该类别的代码，您需要将隐藏的输入放在链接标签中，以便找到正确的输入。或者，只使用数据属性，例如：<li class="c-menu__item fs-xsmall" data-code=" category.code "> 并忘记输入标签。

那你就可以$( document ).on( 'click', '#next-category', function(e) e.preventDefault(); alert($(this).attr("data-code")); );

另外% for category in categories() % 不知道怎么不会导致异常，当你不应该有括号时。

【参考方案1】：

Gocht 评论是正确答案。 既然你想遍历标签，它们应该有不同的 id ！！！

简单的解决方法是使用一个类并评估正确的 id：

% for category in categories() %
    <li class="c-menu__item fs-xsmall">
        <a href="#" class="next-category" value=" forloop.counter " >
             category
        </a>
    </li>
    <input type="hidden" value=" category.code " id="category-id- forloop.counter ">
% endfor %
<div class="col-xs-4" id="sub_categories">
</div>

脚本：

$( document ).on( 'click', '.next-category', function(e)
    e.preventDefault();
    var id = $(this).attr("value");
    var input_id = "#category-id-" + id;

    $.ajax(
        url : 'product_category/addAjax',
        type : 'POST',
        data : 
            category: $(input_id).val(),
        ,
    )
    .fail(function( jqXHR, textStatus, errorThrown )
        console.log('FAIL');
    )
    .done(function(data)
        console.log('DONE');
        $('#sub_categories').prop('innerHTML',data["sub_categories"]);

    );
    return false;
);

【讨论】：

谢谢！我尝试在 HTML 中更改“名称”的“值”并修复它工作的 .js

伟大的 Marisela，考虑将答案标记为正确，这很有帮助！ ;-)