JQuery ajax 把后台返回的List数据 遍历出来 赋值给div

时间:2023-03-08 15:08:10
JQuery ajax 把后台返回的List数据 遍历出来 赋值给div

1、效果

JQuery ajax 把后台返回的List数据 遍历出来 赋值给div

2、前端代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>testPic</title>
<script src="IndusJS/jquery.min.js"></script>
<script type="text/javascript">
var tt1 = 0;
var myArr = new Array();
$(function () {
$.ajax({
type: "post",
url: 'Home/getTestDICData',
data: { pid: 1 },
dataType: "json",
success: function (data) {
var ImageContent = "";
$.each(data, function (index, val) {
if (index == "picBase64") {
if (val.length > 0) {
for (var i = 0; i < val.length; i++) {
ImageContent += '<span>key:"' + val[i].ID + '";</span><span>value:"' + val[i].valName + '"</span>';
}
$('#imgCon').html(ImageContent);
}
}
else {
$('#' + index + '').val(value);
}
});
},
error: function (data) {
console.log(data);
}
});
});</script>
</head>
<body> <div id="imgCon">
</div> </body>
</html>

2、后台代码

        public JsonResult getTestDICData()
{
picModel model = new picModel();
subPicMolde k1 = new subPicMolde() { ID=, valName="值1" };
subPicMolde k2= new subPicMolde() { ID = , valName = "值2" };
subPicMolde k3 = new subPicMolde() { ID = , valName = "值3" };
subPicMolde k4 = new subPicMolde() { ID = , valName = "值4" };
List<subPicMolde> myList = new List<subPicMolde>();
myList.Add(k1);
myList.Add(k2);
myList.Add(k3);
myList.Add(k4);
model.picBase64 = myList;
return Json(model,JsonRequestBehavior.DenyGet);
} public class picModel
{
public List<subPicMolde> picBase64;
} public class subPicMolde
{
public int ID { get; set; }
public string valName { get; set; }
}