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. 洛谷 P 3379 【模板】最近公共祖先（LCA）

    题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点个数.询问的个数和树根结点的序号. 接下来N-1行每 ...

  2. js -“=”“==”和“===”的区别

    这个问题再面试中经常被问到,说实话我都是懵的,一个“=”和两个“==”等的区别我还是知道的,就是三个“===”我完全是不知道的,因为我基本上都没有遇到过且用到过,所以再这个问题上我是没分的,人家考官就 ...

  3. codeforces gym 100825 D Rings

    这题果然就是个暴力题.... 看每个T的四个方向,有'.',或者在边界上就填1 不然就填四个方向上最小的那个数再加1 然而写wa了几发,有点蠢... #include <bits/stdc++. ...

  4. eclipse启动的时候 一直未响应状态 然后闪退

    解决方案:在你的工作目录中,有一个.metadata目录,里面是工作区及各插件的信息,删除此目录可以解决问题.保险起见,先剪切到另一地方.再重启启动.

  5. Careercup | Chapter 6

    6.2 There is an 8x8 chess board in which two diagonally opposite corners have been cut off. You are ...

  6. 设置USB数据监听

    设置USB数据监听   在Kali Linux中,USB也是作为一个通信端口进行存在.常见的鼠标.键盘.U盘都是通过USB接口传输数据.所以,对于USB接口也可以实施监听,类似网络接口一样.在进行US ...

  7. 编译lua

    http://www.lua.org/ 新建一个 static library 工程,把解压得到的目录下的src子目录中的所有.h和.c文件拷贝到新工程目录下. 工程中删除自动生成的 main.c 文 ...

  8. Java泛型中的类型擦除机制简单理解

    Java的泛型是JDK1.5时引入的.下面只是简单的介绍,不做深入的分析. Java的泛型是伪泛型.为什么说Java的泛型是伪泛型呢?因为,在编译期间,所有的泛型信息都会被擦除掉.正确理解泛型概念的首 ...

  9. Linux BPF/bcc for Oracle Tracing

    Luca Canali on 26 May 2016 Topic: In this post you will find a short discussion and pointers to the ...

  10. python设置utf-8为默认编码

    当使用Python编程时,编码问题一直很让人头疼,程序中经常会碰到如下错误提示: UnicodeDecodeError: 'ascii' codec can't decode byte 0x?? in ...