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. http client transfer

    背景 在平时工作中我偶尔会写一些脚本监控HTTP接口的健康状况,基本上都是发送HTTP GET或HTTP POST请求,然后检测响应内容.但一直用的是WebClient和HttpWebRequest, ...

  2. 用jquery写的position瀑布流布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---0

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下: <Linux命令行与shell脚本 ...

  4. Codeforces 403D: Beautiful Pairs of Numbers（DP）

    题意:转换模型之后,就是1~n个数中选k个,放到一个容量为n的背包中,这个背包还特别神奇,相同的物品摆放的位置不同时,算不同的放法(想象背包空间就是一个长度为n的数组,然后容量为1的物体放一个格子,容 ...

  5. 微信小程序 使用HMACSHA1和md5为登陆注册报文添加指纹验证签名

    对接口请求报文作指纹验证签名相信在开发中经常碰到, 这次在与java后端一起开发小程序时,就碰到需求对登陆注册请求报文添加指纹验证签名来防止信息被修改 先来看下我们与后端定制签名规则 2.4. 签名规 ...

  6. 服务器SSL/TLS快速检测工具TLLSSLed

    服务器SSL/TLS快速检测工具TLLSSLed   现在SSL和TLS被广泛应用服务器的数据加密中,如网站的HTTPS服务.所以,在渗透测试中如何快速检测服务器的SSL和TLS配置寻找安全漏洞,就显 ...

  7. BZOJ 2085 [POI2010] Hamsters

    题面 Description Tz养了一群仓鼠,他们都有英文小写的名字,现在Tz想用一个字母序列来表示他们的名字,只要他们的名字是字母序列中的一个子串就算,出现多次可以重复计算.现在Tz想好了要出现多 ...

  8. 【spring boot】在Spring mvc中controller中可以拿到对象信息，但是返回给前台却是什么也没有，解决方案

    如图所示: 最后: 问题解决: 这个原因是因为,User类并未给字段提供get/set方法,所以给前台传递过去的值是空的. 解决方案: 为User类添lombok的注解@Data,为实体类提供get/ ...

  9. vuejs npm chromedriver 报错

    vuejs npm chromedriver 报错   # 全局安装 vue-cli$ npm install -g vue-cli# 创建一个基于 "webpack" 模板的新项 ...

  10. 转: 基于netty+ protobuf +spring + hibernate + jgroups开发的游戏服务端

    from: http://ybak.iteye.com/blog/1853335 基于netty+ protobuf +spring + hibernate + jgroups开发的游戏服务端 游戏服 ...