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. sharpwebmail邮件管理系统开源 下载及使用方法

    原文发布时间为:2008-11-16 -- 来源于本人的百度文章 [由搬家工具导入] 网址：http://sourceforge.net/projects/sharpwebmail/ 点击后：点击do ...

  2. 转 php simple test

    转自 后期移至 以下为汪大哥写的 yunlian服务监控 如何写监控代码 首先在tests目录下新建一个文件xxx.php.其中xxx为你的服务名. class XxxTestCase extends ...

  3. 首次远程安装 GlassFish 后以远程 Web 方式访问其后台管理系统出现错误的解决方法（修订）

    首次远程安装 GlassFish 服务后,如果以远程 Web 方式访问其后台管理系统,会提示 Secure Admin must be enabled to access the DAS remote ...

  4. 重新实践《轻量级DJANGO》这本书

    从手到尾,手写的DJANGO,不借助命令,效果一样的呢. import os import sys import hashlib from django.conf import settings DE ...

  5. EXT.JS6中的model,store,proxy的一些用法

    //one-to-one Ext.define('Address', { extend: 'Ext.data.Model', fields: [ 'address', 'city', 'state', ...

  6. android添加桌面悬浮窗

    1. 添加权限 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/> 2. ...

  7. Java-HashMap原理解析

    本文分析HashMap的实现原理. 数据结构(散列表) HashMap是一个散列表(也叫哈希表),用来存储键值对(key-value)映射.散列表是一种数组和链表的结合体,结构图如下: 简单来说散列表 ...

  8. sed命令2

    测试文件sedtest.txt,内容为: [root@localhost sed]# cat sedtest.txt my cat's name is betty it's a cat; this i ...

  9. win10 安装git

    http://jingyan.baidu.com/article/a3a3f811d4cd308da2eb8ad1.html 双击exe安装包,在弹出的安全提示中点击“允许”.   安装向导的头两步都 ...

  10. 在win7上安装visual c++ 2008 redistributable 发生错误error 1935

     方案一.原来服务"Windows Modules Installer"被禁用了, 启用该服务后, 问题就解决了.  方案二. 1.点开始——在运行框里输入regedit,按回车键 ...