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=, 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; }

    }

JQuery ajax 把后台返回的List数据 遍历出来 赋值给div的更多相关文章

  1. 【转】Jquery ajax方法解析返回的json数据

    转自http://blog.csdn.net/haiqiao_2010/article/details/12653555 最近在用jQuery的ajax方法传递接收json数据时发现一个问题,那就是返 ...

  2. jQuery ajax从后台取不到数据

    ajax post  data  获取不到数据,注意 content-type的设置 .post/get 关于 jQuery data 传递数据.网上各种获取不到数据,乱码之类的. 好吧今天我也遇到了 ...

  3. ajax 请求 对json传的处理 Jquery 使用Ajax获取后台返回的Json数据后,页面处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Jquery 使用Ajax获取后台返回的Json数据后,页面处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 【转】Jquery 使用Ajax获取后台返回的Json数据后,页面处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Ajax处理后台返回的Json数据

    // 处理后台传来的Json字符串装换成Json对象 var dataJson = JSON.parse(data); // 此时可以从Json对象中取值 if(dataJson.result == ...

  7. jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)

    在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...

  8. 【.net ajax显示后台返回值】

    1..net ajax显示后台返回值 <script>        $(document).ready(function () {            $("#btn&quo ...

  9. jQuery ajax请求错误返回status 0和错误error的问题

    上周发现一个jQuery ajax请求错误返回status 0和错误error的问题,responseText是"error",状态码是0而不是200: $.ajax({ type ...

随机推荐

  1. 汇编指令详解--as手册

    https://sourceware.org/binutils/docs/as/ Table of Contents 1 Overview 1.1 Structure of this Manual 1 ...

  2. hdu4635 有向图最多添加多少边使图仍非强连通

    思路:先缩点成有向无环图,则必然含有出度为0的点/入度为0的点,因为要使添加的边尽量多,最多最多也就n*(n-1)条减去原来的m条边,这样是一个强连通图,问题转化为最少去掉几条,使图不强连通,原来图中 ...

  3. awk数组详解、实战

    1.其它编程语言数组的下标一般从0开始,awk中数组下标默认从1开始,也可以从0开始设置: awk 'BEGIN{huluwa[0]="大娃";huluwa[1]="二娃 ...

  4. linux 用户管理命令学习

    groupadd www-data 添加组 useradd phpcomposer -g www-data 添加用户并加入组中 passwd phpcomposer 添加密码 usermod -g p ...

  5. openfire Android学习(五)------连接断开重连

    首先要创建连接监听器,用来监听连接状态,这里我写了一个类 继承了ConnectionListener,重写了里面5个方法,最重要的两个方法connectionClosed()和connectionCl ...

  6. 实机桌面上给虚拟机安装系统（分区，恢复GHO）

    在虚拟机里安装系统大家都会了.我这里介绍一种方法无须进入虚拟机里操作.全部在实机里完成对虚拟机安装系统(分区.恢复GHO).这里要使用到的工具如下1分区工具DISKGENIUS2虚拟光驱3Ghost镜 ...

  7. hdu 5389 Zero Escape (dp)

    题目:http://acm.hdu.edu.cn/showproblem.php? pid=5389 题意:定义数根:①把每一位上的数字加起来得到一个新的数,②反复①直到得到的数仅仅有1位.给定n,A ...

  8. G 全然背包

    <span style="color:#3333ff;">/* /* _________________________________________________ ...

  9. JMeter 压力測试使用函数和 CSV 文件參数化 json 数据

            在 http Load Testing 中.json 数据的提交是个让人头疼的问题.本文具体介绍怎样进行 JMeter 的 json 測试提交,以及怎样将其參数化.        St ...

  10. 江湖问题研究-- intent传递有没有限制大小，是多少？

    出门一步,便是江湖.江湖上有很多流言. 比方这条: intent传递是有限制大小的,详细在40KB左右. 当然也有传言说是1M左右. 数百头母驴为何半夜慘叫? 小卖部安全套为何屡遭黑手? 女生宿舍内裤 ...