JSON.stringify && JSON.parse

最新推荐文章于 2024-09-12 17:50:01 发布

小红帽!=大灰狼

最新推荐文章于 2024-09-12 17:50:01 发布

阅读量165

点赞数

分类专栏： Ajax请求原生JS 文章标签： javascript ajax latex mathml

本文链接：https://blog.csdn.net/WEB__Wang/article/details/121966725

版权

Ajax请求同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

原生JS

1 篇文章 0 订阅

订阅专栏

本文记录了使用原生JavaScript进行Ajax请求时遇到500错误的解决方法。关键在于确保在发送POST请求前，正确设置Content-Type头，并将数据转化为JSON格式字符串。当xhr.readyState为4且xhr.status为200时，通过JSON.parse解析响应文本，根据返回结果更新页面显示。同时，代码展示了如何监听提交按钮点击事件，获取输入值并进行类型检查。

摘要由CSDN通过智能技术生成

原生JS 通过 ajax请求数据的时候控制台报500的错误，在这里记录一下，不喜勿喷哈！！！

 let submit = document.getElementsByClassName("submit")[0];
        submit.addEventListener("click",function(){
            let answer = document.getElementById("inp1").value;
            let standardAnswer = document.getElementById("inp2").value;
            let data = {
                "answer":"",
                "standardAnswer":""
            }
            data.answer = answer;
            data.standardAnswer = standardAnswer;
            let xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP")
            }
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200){
                    //将字符串转为json格式
                    let obj = JSON.parse(xhr.responseText);
                    if (obj.result == 1) {
                        result.innerText = "相似"
                        return;
                    } else if (obj.result == 0) {
                        result.innerText = "不相似"
                        return;
                    }else {
                        result.innerText = "不可检测"
                    }
                }
            }
            xhr.open('POST','http://10.1.23.105:8084/question/equal-check',true);
            xhr.setRequestHeader("Content-Type", "application/json");
            //发送数据之前将Json数据转为字符串
            xhr.send(JSON.stringify(data));
            const box = document.querySelector("#math-rend-box");
            const studentBox = box.children[0];
            const normalBox = box.children[1];
            const result = box.children[2];
            studentBox.innerText = answer;
            normalBox.innerHTML = standardAnswer;
            // MathJax.texReset();
            // MathJax.typesetClear();
            MathJax.typeset();
        })

从上面的代码段中，在判断 result 状态前需要通过 JSON.parse() 将字符串转为 JSON 格式后再进行判断，还有就是在 send 发送数据之前一定要将数据通过 JSON.stringify() 将 JSON 格式的数据转为字符串类型，否则没有办法请求数据，这就是控制台报500错误的原因。