javascript - 将 fetch 中的数据插入 HTML div

标签 javascript html

我在将数据从我的提取响应中获取到 div 时遇到问题。数据很好地进入了控制台,但我无法用它来更新 div。

<html lang="">
    <head>
        <meta charset="UTF-8">
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
        <div id="phand">
            <button id="deal" class="btn">Deal!</button>
        </div>
        <script type="text/javascript" src="{% static 'blackjack/play.js' %}"></script>
    </body>
</html>

(function () {


    function deal() {
        fetch('/deal')
        .then(response => response.json())
        .then(data => {
            console.log(data)
            var card1Rank = data[0];
            var card1Suit = data[1];
            var card2Rank = data[2];
            var card2Suit = data[3];
            $("#phand").append('<acidjs-xdeck-card rank=' + card1Rank + 'suit=' + card1Suit + '></acidjs-xdeck-card>');

        });
    };

    $('#deal').on('click', function() {
        deal();
    });



}());

我希望 javascript 将获取请求的响应插入到页面上的“phand”元素中,我可以在控制台中看到数据,但它不会改变页面的内容。

最佳答案

也许您需要使用 JSON.stringify() 将数据转换为字符串,尝试附加

$("#phand").append('<acidjs-xdeck-card rank=' + JSON.stringify(card1Rank) + 'suit=' + JSON.stringify(card1Suit) + '></acidjs-xdeck-card>');

关于javascript - 将 fetch 中的数据插入 HTML div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58725652/

相关文章:

javascript - 防止 ajax 调用触发两次

Javascript 使用回调进行排序

javascript - 从 GridView 的数据列表之一查找链接按钮

javascript - 如何使用 Javascript 添加高亮显示?

html - 打印 CSS - 避免切割 DIV

php - php 能做我想做的事吗?

javascript - 鼠标悬停时垂直滚动 div

javascript - 什么是 "PropTypes.oneOf"的 TypeScript 等效项(将变量限制为值的子集)

php - 我如何找到这个 div ? (PHP 简单 HTML DOM 解析器)

python - 如何在 Python 中不使用带有 Selenium 的 <Select> 标记时选择下拉选项