1. 程式人生 > >JQuery ajax 把後臺返回的List資料 遍歷出來 賦值給div

JQuery ajax 把後臺返回的List資料 遍歷出來 賦值給div

1、效果

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=1, valName="值1" };
            subPicMolde k2= new subPicMolde()  { ID = 2, valName = "值2" };
            subPicMolde k3 = new subPicMolde() { ID = 3, valName = "值3" };
            subPicMolde k4 = new subPicMolde() { ID = 4, 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; }
    }