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. 转载：Flappy Bird源代码 win32 console版

    #include"StdAfx.h" #include<stdio.h> #include<stdlib.h> #include<conio.h> ...

  2. 在IOS11中position:fixed弹出框中的input出现光标错位的问题

    问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...

  3. 虚拟机centos 同一个tomcat、不同端口访问不同的项目

    在tomcat中复制webapps目录,并重命名:

  4. JVM 常用命令

    对于有图形化界面的用户来,jconsole就可以搞定,界面使用很简单 还可以查看很多信息,例如检测死锁. 下面是没有图形化界面的系统 可以用命令 : jps 查看jvm 进程 jstack -l  6 ...

  5. Java创建和解析Json数据方法（二）——org.json包的使用

    (二)org.json包的使用 1.简介   工具包org.json.jar,是一个轻量级的,JAVA下的json构造和解析工具包,它还包含JSON与XML, HTTP headers, Cookie ...

  6. andriod Java中度转度分秒

    public String trandu2m(double d) { //gisoracle 编号 try { //double dd = Convert.ToDouble(str); String ...

  7. Android:MVC模式(上)

    很多Android的入门书籍,在前面介绍完布局后就会逐个介绍组件,然后开始编写组件使用的例子.每每到此时小伙伴们都可能会有些疑问:是否应该先啃完一本<Java编程思想>学点 Java 知识 ...

  8. 使用hexo搭建github个人博客网站

    搭建步骤: 1>Mac或win电脑一台,本文以mac为例. 2>下载安装Git和Node 3>安装hexo 4>注册登录GitHub,创建一个仓库,库名格式为:GitHub用户 ...

  9. python得到最长递增子串长度及起始位置【转】

    def incSeq(seq): start = 0 for i in xrange(1, len(seq)): if seq[i] < seq[i-1]: yield start, i - s ...

  10. C# 解析迅雷链接成正常的Http链接

    目前热门剧司马懿第一集的迅雷下载地址是: thunder://QUFodHRwOi8vZGwxMjIuODBzLmltOjkyMC8xNzA2L1vlpKflhptTU+mprOaHv+S5i+WGm ...