【JQuery】返回的JSON数据解析错误问题

0.叠甲

博主是一个编程菜鸟，所以如有什么写的不正确或有误的部分请诸君友善交流，如果对诸位有帮助的话也请点个赞鼓励一下吧，非常感谢

1.问题概述

1.1.版本

插件	版本
bootstrap	v5.1.3
jquery	3.5.0

1.2.代码概述

1.2.1. form表单

<form id="form-email-login" method="post">
    <div class="row">
        <!-- 用户身份 -->
        <input id="identityInput" style="display:none" name="identity" value="1">
        <!-- 邮箱输入框 -->
        <div class="col-12">
            <div class="form-group">
                <input type="email" id="email" class="form-control" name="email" placeholder="请填写邮箱" required="required">
            </div>
            <!-- 邮箱提示占位 -->
            <div id="emailAlertPlaceholder"></div>
        </div>

        <!-- 图形验证码输入框 -->
        <div class="col-xl-6">
            <div class="form-group">
                <input id="captcha" type="captcha" class="form-control" name="captcha" placeholder="请填写图形验证码" required="required">
            </div>
        </div>

        <!-- 图形验证码图片 -->
        <div class="col-xl-6">
            <div class="form-group">
                <img style="max-height: 60px;" id="captchaImg" class="img-fluid" src="/user/captcha" onclick="changeCaptcha()">
            </div>
        </div>
        
        <!-- 图形验证码提示占位 -->
        <div class="col-12">
            <div class="form-group">
                <div id="captchaAlertPlaceholder"></div>
            </div>
        </div>

        <!-- 邮箱验证码 -->
        <div class="col-xl-6">
            <div class="form-group">
                <input id="emailCode" type="emailCode" class="form-control" name="emailCode" placeholder="请填写邮箱验证码" required="required">
            </div>
        </div>

        <!-- 邮箱验证码发送按钮 -->
        <div class="col-xl-6">
            <div class="form-group">
                <button type="button" class="btn btn-primary" onclick="sendEmail()">发送邮件</button>
            </div>
        </div>

        <div class="col-12">
            <div class="form-group">
                <div class="fxt-checkbox-wrap">
                    <div class="fxt-checkbox-box mr-3">
                        <input id="keepLogin" name="keepLogin" type="checkbox">
                        <label for="keepLogin" class="ps-4">保持登录</label>
                    </div>
                    <a href="forgot-password.html" class="fxt-switcher-text">忘记密码</a>
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="form-group">
                <button onclick="submitForm(event)" class="fxt-btn-fill">登 录</button>
            </div>
        </div>
    </div>
</form>

1.2.2. form表单提交JS代码

  function submitForm(event){
        // 阻止表单自动提交
        event.preventDefault();
        let param = formSerialize("form-email-login");
        
        let paramJson = JSON.stringify(param)

        $.ajax({
                //请求方式
                method : "post",
                //请求路径
                url : "/user/loginByEmail",
                //提交的参数
                data : paramJson,
                //请求格式
                contentType:'application/json',
                //请求成功的回调函数
                success : function (data) {
                    // console.log(data)
                    if(data.flag){
                        showMsg('liveToast', data.msg, 'success')
                    }else{
                        showMsg('liveToast', data.msg, 'danger')
                    }
                },
                //请求失败的回调函数
                error : function (data) {
                    showMsg('liveToast', '出现错误了', 'danger')
                }
            })
    }

1.2.3. formSerialize函数

function formSerialize(formId){
    //表单序列化，方便传参 --- 变成数组
    var paramArray =  $("#"+formId).serializeArray();
    //必须new Object才可接收
    var param = new Object;
    for(var i = 0 ; i<paramArray.length;i++){
        param[paramArray[i].name] = paramArray[i].value
    }
    return param;
}

1.3.问题描述

返回的JSON数据没有被JQuery自动转换成JSON对象，导致处理时无法得到其中的数据

1.4. 后端返回值样例

{
	"msg":"登录成功",
	"flag":1,
	"userId":"18050030",
	"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpZGVudGl0eSI6MSwiZXhwIjoxNzEzNzg0NDczfQ.Zf5HCPXJAPiueVNh7IubQi0qDM02CZtE0EyRWF6v1uSutRd7iAYrJBbcLeIcUEsn717Pfd3dzvZRctlmYY4-k-jBx3iKyXc5nWVg-PiL7UnqW3woLgWz6KRBkGvCoEAR0NfniTGf-Pm6g631vFTB8auXTRNDDjFb6-CacqcrkxkR-rFbhOtfazQWpSuRuPUv2ftGxsjzZlJDXlTRK-1jrX7cHTyLX3yPCq5kMDU1DMFOKMTUcljZoasH8GKgkdjVl030OdEmn693HEktwoM3hL5sEGzUI0Mi60w_q58voccnkkBq3Xu4khKIh0koOr4ojx9yv60vU7kXxCE2lyWDLQ"
}

2.解决方案

2.1. 与GPT的问答

2.1.1. 问题

为什么在获得返回的JSON数据后，我访问data.msg，会告诉我undefined呢？返回的json数据如下：{“msg”:“登录成功”,“flag”:1,“userId”:“18050030”,“token”:“eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpZGVudGl0eSI6MSwiZXhwIjoxNzEzNzg0NDczfQ.Zf5HCPXJAPiueVNh7IubQi0qDM02CZtE0EyRWF6v1uSutRd7iAYrJBbcLeIcUEsn717Pfd3dzvZRctlmYY4-k-jBx3iKyXc5nWVg-PiL7UnqW3woLgWz6KRBkGvCoEAR0NfniTGf-Pm6g631vFTB8auXTRNDDjFb6-CacqcrkxkR-rFbhOtfazQWpSuRuPUv2ftGxsjzZlJDXlTRK-1jrX7cHTyLX3yPCq5kMDU1DMFOKMTUcljZoasH8GKgkdjVl030OdEmn693HEktwoM3hL5sEGzUI0Mi60w_q58voccnkkBq3Xu4khKIh0koOr4ojx9yv60vU7kXxCE2lyWDLQ”}

2.1.2. 回答

如果你在尝试访问返回的 JSON 数据中的 data.msg 时得到了 undefined，可能有几个原因：

变量名不匹配：
在你的 AJAX 请求的 success 回调函数中，你需要确保你使用的变量名与实际返回的 JSON 数据的属性名相匹配。根据你提供的 JSON 数据，它没有 data 这个属性，而是直接包含 msg、flag 等属性。你应该直接使用 msg 而不是 data.msg 来访问消息内容。

修改后的代码应该是这样的：
```
success: function (response) {
    console.log(response);
    if(response.flag){
        // showMsg('liveToast', response.msg, 'success')
    }else{
        // showMsg('liveToast', response.msg, 'danger')
    }
},
```
在这个修改后的代码中，response 就是你的 JSON 数据对象，你可以直接通过 response.msg 来访问消息内容。
JSON 数据解析问题：
如果你的 JSON 数据是通过 JSON.stringify 转换为字符串然后发送的，确保在服务器端接收到请求时，服务器正确地解析了 JSON 字符串。同样，服务器的响应也应该是一个 JSON 字符串，客户端通过 JSON.parse 或者 jQuery 的 $.parseJSON 来解析这个字符串。
网络请求问题：
确保 AJAX 请求成功发送并且服务器正确响应。你可以在 success 回调函数之前添加一个 console.log(data) 来检查实际接收到的数据。
AJAX 请求设置问题：
确保你的 AJAX 请求设置了正确的 dataType。如果 dataType 设置为 “json”，jQuery 会自动解析 JSON 响应。
```
$.ajax({
    dataType: 'json', // 确保服务器响应的 MIME 类型是 application/json
    // 其他设置...
});
```
服务器响应问题：
如果你的服务器在处理请求时出现了问题，它可能没有返回正确的 JSON 数据。检查服务器端的日志和错误处理，确保服务器正常工作并返回了预期的 JSON 响应。

检查以上几点，应该能帮助你找到问题所在并解决 undefined 的问题。

2.2.本次问题的具体解决方案

在提交form表单的ajax请求中添加dataType并设为json，添加后如下：

    function submitForm(event){
        // 阻止表单自动提交
        event.preventDefault();
        let param = formSerialize("form-email-login");
        
        let paramJson = JSON.stringify(param)

        $.ajax({
                //请求方式
                method : "post",
                //请求路径
                url : "/user/loginByEmail",
                //提交的参数
                data : paramJson,
                //请求格式
                contentType:'application/json',

                //添加返回值类型
                dataType: 'json',

                //请求成功的回调函数
                success : function (data) {
                    // console.log(data)
                    if(data.flag){
                        showMsg('liveToast', data.msg, 'success')
                    }else{
                        showMsg('liveToast', data.msg, 'danger')
                    }
                },
                //请求失败的回调函数
                error : function (data) {
                    showMsg('liveToast', '出现错误了', 'danger')
                }
            })
    }

3.使用的GPT

https://www.gnomic.cn/