为啥我的 Javascript 代码返回对象对象？

Posted 2023-02-24

【中文标题】为啥我的 Javascript 代码返回对象对象？

【英文标题】：Why does my Javascript code return object object?为什么我的 Javascript 代码返回对象对象？

【发布时间】：2021-12-30 20:07:31

【问题描述】：

我是 jQuery 新手。

我尝试在 jQuery 中从我的 django 视图中获取/汇总一些项目。这就是我所拥有的：

$(document).ready(function()

    var sch = $('#sch-books');
    var gov = $('#gov-books');
    var total = sch.val() + gov.val();
    $('#total').text("Total : " + total); 

);

我的模板有这个：

<div id="sch-books" class="h6 mb-1">School copies - <b> s_books.count </b></div>
<div id="gov-books"class="h6 mb-1">Govt copies - <b> g_books.count </b></div>
<div id="total"></div>

显示Total :

谁能帮我把它弄好..

【问题讨论】：

div没有值，只需要解析int

相信我，像两个数字相加这样简单的操作不会让您的网站变慢。将您的 HTTP 响应发送到客户端需要更长的时间。

可以使用django添加模板标签docs.djangoproject.com/en/3.2/ref/templates/builtins/#add

试试这个： s_books.count|add:g_books.count

@rahul.m - 哇哦，add 看起来很有希望。

【参考方案1】：

val() 返回 value 属性，如 <input type="text" value=something/> 和 html() 返回所选元素的内容 (innerHTML)。

因此，像这样修改您的代码，您就可以开始了。 （我假设 django 在 s_books.count 和 g_books.count 中返回一个数值）。

$(document).ready(function()

    var sch = $('#sch-books b').html(); // added b element  and calling html()
    var gov = $('#gov-books b').html(); // added b element  and calling html()
    
    var total = parseInt(sch) + parseInt(gov); // converted the string into number using parseInt()

    $('#total').text("Total : " + total); // worked

);

【参考方案2】：

前言：我建议你在模板中处理这个问题，现在有两个答案告诉你如何处理（here 和here）。 （我不使用 Django。）请注意，在客户端代码中执行此操作会导致 <div id="total"></div> 非常短暂地出现空白，然后用数字填充。如果页面加载时该元素在视图中，则用户会看到闪烁——即使他们无法确切看到闪烁的内容（这可能会令人恼火）。在 Django 视图中避免这种情况可能会更好。

但是你的客户端代码：

div 元素没有value，它们有textContent 和innerHTML（详见this question's answers）。但是这些div 元素的内容中除了您要查找的数字之外还有很多东西。虽然您可以将数字从文本中分离出来（或仅从 div 中的 b 元素中检索它），但如果有人以看似无害的方式更改模板，这些都是脆弱的解决方案。

如果您真的想使用客户端代码处理此问题，请将您想要的值存储在 data-* 属性中的 div 元素中：

<div id="sch-books" class="h6 mb-1" data-count=" s_books.count ">School copies - <b> s_books.count </b></div>
<div id="gov-books" class="h6 mb-1" data-count=" g_books.count ">Govt copies - <b> g_books.count </b></div>
<div id="total"></div>

然后获取data-* 属性：

$(document).ready(function() 
    const sch = +$("#sch-books").attr("data-count");
    const gov = +$("#gov-books").attr("data-count");
    const total = sch + gov;
    $("#total").text(`Total : $total`); 
);

【讨论】：

当然，有数据属性的方案也行，但我觉得提问题的人没有太多经验，我们不应该建议更有经验的开发者会做的方案。 Django模板的解决方案看起来很棒:)我认为它应该比涉及JS更好。

@KrystianSztadhaus - 也许您可以在模板中发布实现方式。我不得不删除我的，因为我发现 this 告诉我它不起作用。我同意在模板中这样做可能会更好。

你是对的，对不起:)

@KrystianSztadhaus - 嗯，我太敏感了。 :-) 谢谢。

@amadousow - 如果您有基于 Django 的解决方案，请务必发布。 :-)（我不使用 Django，所以我只能帮助处理 OP 尝试使用的客户端代码——但我认为使用 Django 会更好地解决这个问题。）

【参考方案3】：

您可以尝试为此目的使用 django-mathfilter。因为用户可以禁用 javascript，并且 django-mathfilter 非常强大。

$ pip install django-mathfiltersThen add mathfilters to your INSTALLED_APPS.

然后在你的模板中你可以做这样的事情。

% load mathfilters %
........
% with s_books.count as s_book and g_books.count as g_book % 
<div id="sch-books" class="h6 mb-1">School copies - <b> s_book </b></div>
<div id="gov-books"class="h6 mb-1">Govt copies - <b> g_book </b></div>
<div id="total"> s_book|add:g_book </div>
% endwith %

更多信息请阅读https://pypi.org/project/django-mathfilters/

【参考方案4】：

我会建议在 Django 端创建 total_value 并将其移动到模板中，而不是涉及 js 脚本。

<div class="h6 mb-1" data-count=" s_books.count ">School copies - <b> s_books.count </b></div>
<div class="h6 mb-1" data-count=" g_books.count ">Govt copies - <b> g_books.count </b></div>
<div>total_count</div>

我不确定您使用哪种方式来呈现模板，但应该看看这个

# views.py
from django.shortcuts import render

def render_users(request):
    g_books = 
    s_books = 

    context = 
        "g_books": g_books,
        "s_books": s_books,
        "total_count": g_books.count + s_books.count
    

    return render(request, 'books.html', context)

【讨论】：

和/或 Rahul 关于add 的想法是否可行？

对，它也可以。为了更容易调试，我更喜欢将其保留在视图中而不是模板中。因为我们可以在视图中添加断点，但不能在模板中添加。