关于前端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-12-21动态面包屑教程:新手入门指南
- 2024-12-21动态主题处理教程:新手必读指南
- 2024-12-21富文本编辑器教程:新手入门指南
- 2024-12-21前端项目部署教程:从零开始的全面指南
- 2024-12-21拖拽表格教程:轻松入门指南
- 2024-12-21Element-Plus教程:新手入门与实战指南
- 2024-12-21TagsView标签栏导航教程:轻松掌握标签栏导航
- 2024-12-21动态表格实战:新手入门教程
- 2024-12-21动态菜单项实战:一步步教你实现动态菜单项
- 2024-12-21动态面包屑实战:新手教程