如何通过ajax使用PUT客户端

Question

将其设为按钮开关：

let ajouter = (id,qction, answer)=> 

    
   
    buttonswitch.addEventListener('click', () => {
        // Échanger l'état des classes instantanément
        (divc.classList.toggle("true"))

        divc.classList.toggle("false");
    
        const ajaxSwitch = new XMLHttpRequest();
        ajaxSwitch.open('PUT', `${urlApi}/${id}`, true);
    
        ajaxSwitch.addEventListener('load', () => {
            if (ajaxSwitch.status === 200) {
                const updatedQuestion = JSON.parse(ajaxSwitch.response);
                
                const { id, qction, answer } = updatedQuestion;
    
                // Mettre à jour les éléments du DOM
                s.innerText = id;
                cont.innerText = qction;
                answ.value = answer.trim(); // Assigne correcte
            
            } else {
                console.error("Erreur lors de la mise à jour de la question");
            }
        });
    
        const updatedAnswer = answer === 'true' ? 'false' : 'true';
    
        const dataToSend = {
            qction,
            answer: updatedAnswer,
        };
    
        ajaxSwitch.setRequestHeader('Content-Type', 'application/json');
        ajaxSwitch.send(JSON.stringify(dataToSend));
    });

在按钮开关中执行 put 方法 AJAX，打开单击 FALSE 为 TRUE 或 TRUE 为 FALSE 并发送结果此代码不是代码更改它

Answer 1

您似乎想在单击按钮（或开关）时在“true”和“false”之间切换状态。这是使用 AJAX 实现此目的的代码的修改版本：

    let ajouter = (id, qction, answer) => {
    buttonswitch.addEventListener('click', () => {
        const divc = document.querySelector('.your-div'); // Replace with your actual div
        divc.classList.toggle("true");
        divc.classList.toggle("false");

        const ajaxSwitch = new XMLHttpRequest();
        ajaxSwitch.open('PUT', `${urlApi}/${id}`, true);

        ajaxSwitch.addEventListener('load', () => {
            if (ajaxSwitch.status === 200) {
                const updatedQuestion = JSON.parse(ajaxSwitch.response);
                const { id, qction, answer } = updatedQuestion;

                // Update DOM elements
                document.getElementById('id-element').innerText = id; // Replace with actual IDs
                document.getElementById('question-element').innerText = qction;
                document.getElementById('answer-element').value = answer.trim();
            } else {
                console.error("Error updating the question");
            }
        });

        const updatedAnswer = answer === 'true' ? 'false' : 'true';

        const dataToSend = {
            qction,
            answer: updatedAnswer,
        };

        ajaxSwitch.setRequestHeader('Content-Type', 'application/json');
        ajaxSwitch.send(JSON.stringify(dataToSend));
    });
};

您似乎想在单击按钮（或开关）时在“true”和“false”之间切换状态。这是使用 AJAX 实现此目的的代码的修改版本：

javascript 复制代码 让 ajouter = (id, qction, 答案) => { buttonswitch.addEventListener('点击', () => { const divc = document.querySelector('.your-div'); // 替换为你实际的 div divc.classList.toggle("true"); divc.classList.toggle("false");

    const ajaxSwitch = new XMLHttpRequest();
    ajaxSwitch.open('PUT', `${urlApi}/${id}`, true);

    ajaxSwitch.addEventListener('load', () => {
        if (ajaxSwitch.status === 200) {
            const updatedQuestion = JSON.parse(ajaxSwitch.response);
            const { id, qction, answer } = updatedQuestion;

            // Update DOM elements
            document.getElementById('id-element').innerText = id; // Replace with actual IDs
            document.getElementById('question-element').innerText = qction;
            document.getElementById('answer-element').value = answer.trim();
        } else {
            console.error("Error updating the question");
        }
    });

    const updatedAnswer = answer === 'true' ? 'false' : 'true';

    const dataToSend = {
        qction,
        answer: updatedAnswer,
    };

    ajaxSwitch.setRequestHeader('Content-Type', 'application/json');
    ajaxSwitch.send(JSON.stringify(dataToSend));
});

}； 此代码假设您有要在其中显示更新的问题数据的 HTML 元素（ID 为“id-element”、“question-element”、“answer-element”）。将这些 ID 替换为您实际的 HTML 元素。

此外，请确保“urlApi”在此函数的范围内定义且可访问，并且“.your-div”是您想要切换类的 div 的正确选择器