关于前端ajax请求获取数据成功之后无法操作数据的原因及解决方法
2022/4/27 6:15:55
本文主要是介绍关于前端ajax请求获取数据成功之后无法操作数据的原因及解决方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言:做项目的时候我用ajax请求json数据,遍历使用数据时却发现页面无响应。关于这个问题今天有个朋友又问了我一次,记录一下。由于我没有记录,这里用我朋友的图片。
代码现象:
-
这里他是使用alert弹出ajax接收到的数据,个人建议在js代码中使用console.log(数据)在控制台打印,更方便看出后端返回的json数据类型(字符串or数组等)。
思考过程:
- 当时初次接触ajax和json概念,于是直接百度。
解决方案:
- 查过网上有很多方法,基本原理都是因为后端返回的json数据是字符串,而我们在操作json数据时需要把他转换成数组对象。或者在后端返回数组格式的数据。我这里使用的方法很简单,亲测万能。代码如下。js代码块中将返回的数据用eval包起来,再定义一个变量接收即可。重点在行15。然后你就可以肆意操纵你的数据啦。
-
1 $.ajax({ 2 type: 'GET', 3 url: 'https://localhost:44369/UserInfo/EditUserJson',//请求数据 4 data: json,//传递数据 5 //dataType:'json/text',//预计服务器返回的类型 6 timeout: 3000,//请求超时的时间 7 //回调函数传参 8 success: succFunction, 9 }) 10 function succFunction(data) { 11 //$("#list").html(''); 12 13 console.log(data) 14 //转换成数组 15 var jsons = eval('(' + data + ')'); 16 console.log(jsons); 17 //console.log(data); 18 for (var i in jsons) { 19 name = jsons[i].Name 20 console.log(name) 21 password = jsons[i].Password 22 //console.log(password) 23 rname = jsons[i].Rname 24 sex = jsons[i].Gender 25 phone = jsons[i].Phone 26 qq = jsons[i].Qq 27 email = jsons[i].Email 28 desc = jsons[i].Desciption 29 group = jsons[i].Gid 30 status = jsons[i].Status 31 } 32 });
这篇关于关于前端ajax请求获取数据成功之后无法操作数据的原因及解决方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-15AntDesign项目实战:新手入门与初级应用教程
- 2024-11-15AntDesign-Form-rules项目实战:新手指南
- 2024-11-14ESLint课程:初学者指南
- 2024-11-14Form.List 动态表单课程:新手入门教程
- 2024-11-14Redux课程:新手入门完全指南
- 2024-11-13MobX 使用入门教程:轻松掌握前端状态管理
- 2024-11-12前端编程资料:新手入门指南与初级教程
- 2024-11-12前端开发资料入门指南
- 2024-11-12前端培训资料:适合新手与初级用户的简单教程
- 2024-11-12前端入门资料:新手必读指南