Question

我在使用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。它通常更易于使用，并且代码更简洁

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

1 个答案: