javascript - 使用 JSON + AJAX 时功能不起作用

Question

这个问题已经有答案了:

Attach event to dynamic elements in javascript (14 个回答)

已关闭 4 年前。

我在使用 AJAX 时遇到问题+ JSON ，每次我尝试在网页上动态编写一些内容时，其他功能就会停止工作...

这是我的JS代码:

window.onload = function(){
    $.ajax({
        url: "data/faq.json",
        method: "POST",
        dataType: "json",
        success: function(faq){
            ispisFAQ(faq);
        },
        error: function(error){
            console.error(error);
        }
    });
    
    
    function ispisFAQ(faq){
        let ispis = '<div class="row faqRow">';

        faq.forEach(element => {
            ispis += `
            <button class="${element.class}"> ${element.question} </button>
            <div class="content">
                <p>
                    ${element.answer}
                </p>
            </div>`;
        });
        ispis += '</div>';
        document.getElementById("faqContainer").innerHTML = ispis;
    }
  }

这是JSON文件:

[
    {
        "class": "collapsableQuestion",
        "question": "1. Do you have a store?",
        "answer": "Yes, I do! Currently I have one store on 2424 George Street in Toronto. You can see all the pieces and more there in person!"
    },
    {
        "class": "collapsableQuestion",
        "question": "2. Do you ship internationally?",
        "answer": "Unfortunately, no. I only ship to Canada, but I'm working on expanding!"
    },
    {
        "class": "collapsableQuestion", 
        "question": "3. What is your return policy?",
        "answer": "Your complete satisfaction is my number one concern.If you are not completely satisfied with your selection, you can return it within 30 days."
    },
    {
        "class": "collapsableQuestion",
        "question": "4. What is your jewelry made of?",
        "answer": "Quality is very important to me. So I make sure that every piece is made of Gold plated .925 sterling silver. I guarantee that it will last you a long time, with no damage."
    },
    {
        "class": "collapsableQuestion",
        "question": "5. Do you clean/repair jewelry?",
        "answer": "If it's one of my pieces, sure! Just contact me with details." 
    },
    {
        "class": "collapsableQuestion",
        "question": "6. Do you make any custom jewerly?",
        "answer": "It's not something I do very often, but if you like the style of my jewerly, price and quality - contact me, and I will see what I can do."
    }
]

但是当我尝试运行下面的代码时，切换某些内容将不起作用......

var tog = document.getElementsByClassName("collapsableQuestion");

for (var i = 0; i < tog.length; i++) {
    tog[i].addEventListener("click", function () {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
            content.style.display = "none";
        } else {
            content.style.display = "block";
        }
    });
}

当我在没有 AJAX 的情况下运行相同的代码时，请帮助我和JSON运行正常，有什么问题吗？

Answer 1

在我看来，您忘记解析 json:当您收到对 ajax 请求的响应时，它被视为文本。这是你应该做的:

window.onload = function(){
$.ajax({
    url: "data/faq.json",
    method: "POST",
    dataType: "json",
    success: function(content){
        var data = JSON.parse(content)
        ispisFAQ(data);
    },
    error: function(error){
        console.error(error);
    }
});

(注意 JSON.parse() 调用)此函数将您收到的文本转换为可以与之交互的 JavaScript 对象。

干杯!

编辑:顺便说一句，您应该查看 fetch API 。它通常更容易使用，并且允许更清晰的代码