关于前端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请求获取数据成功之后无法操作数据的原因及解决方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程