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/
