<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#pic{
font-family: "微软雅黑";
}
#pic li{
width: 200px;
float:left;
margin-right: 10px;
list-style: none;
height: 200px;
}
#pic li img{
width: 200px;
}
#pic li p{
height: 24px;
line-height: 24px;
width: 200px;
overflow: hidden;
text-align: center;
}
</style>
<script type="text/javascript">
var info={//假设后端传入的数据
"data":[
{
"url":"https://imgsa.baidu.com/news/q%3D100/sign=ee89ef5205f431adbad247397b37ac0f/0823dd54564e92588d378c2e9582d158cdbf4eea.jpg",
"price":"$100",
"title":"挺符合 抵达芬兰 开启穿越历史的友谊之旅"
},
{
"url":"https://imgsa.baidu.com/news/q%3D100/sign=9e0b5ac805d79123e6e090749d355917/9825bc315c6034a80a54b241c2134954082376bf.jpg",
"price":"$200",
"title":"一分钟速览习你近即可平的到访地——芬兰"
},
{
"url":"https://imgsa.baidu.com/news/q%3D100/sign=477cb1eea1d3fd1f3009a63a004c25ce/34fae6cd7b899e51ca4418d44ba7d933c9950d23.jpg",
"price":"$300",
"title":"华为研发费用真的过高吗？问题的根子在效率"
},
{
"url":"https://imgsa.baidu.com/news/q%3D100/sign=30661b32ee1190ef07fb96dffe1a9df7/d0c8a786c9177f3ed25a37d279cf3bc79e3d5687.jpg",
"price":"$100",
"title":"习急急急抵达芬兰 开启穿越历史的友谊之旅"
},

{
"url":"https://imgsa.baidu.com/news/q%3D100/sign=30661b32ee1190ef07fb96dffe1a9df7/d0c8a786c9177f3ed25a37d279cf3bc79e3d5687.jpg",
"price":"$100",
"title":"解决好吧抵达芬兰 开启穿越历史的友谊之旅"
},
{
"url":"https://imgsa.baidu.com/news/q%3D100/sign=30661b32ee1190ef07fb96dffe1a9df7/d0c8a786c9177f3ed25a37d279cf3bc79e3d5687.jpg",
"price":"$100",
"title":"不喝酒抵达芬兰 开启穿越历史的友谊之旅"
},
{
"url":"https://imgsa.baidu.com/news/q%3D100/sign=9e0b5ac805d79123e6e090749d355917/9825bc315c6034a80a54b241c2134954082376bf.jpg",
"price":"$200",
"title":"一分钟速览版本平的到访地——芬兰"
},
{
"url":"https://imgsa.baidu.com/news/q%3D100/sign=477cb1eea1d3fd1f3009a63a004c25ce/34fae6cd7b899e51ca4418d44ba7d933c9950d23.jpg",
"price":"$300",
"title":"华为研发费用真的过高吗？问题的根子在效率"
},

{
"url":"https://imgsa.baidu.com/news/q%3D100/sign=477cb1eea1d3fd1f3009a63a004c25ce/34fae6cd7b899e51ca4418d44ba7d933c9950d23.jpg",
"price":"$300",
"title":"华为研发费用真的过高吗？问题的根子在效率"
},
{
"url":"https://imgsa.baidu.com/news/q%3D100/sign=9e0b5ac805d79123e6e090749d355917/9825bc315c6034a80a54b241c2134954082376bf.jpg",
"price":"$200",
"title":"一分钟速览不不不的到访地——芬兰"
}

]
};
window.onload=function(){
var Odiv=document.getElementById('pic');
var str='';
str+='<ul>';
for(var i=0;i<info.data.length;i++){
str+='<li><img src="'+info.data[i].url+'"<p>'+info.data[i].price+'</p><p>'+info.data[i].title+'</p></li>';
}
str+='</ul>';
Odiv.innerHTML=str;
}
var a='hello';
//alert('你的名字是'+a+'!!!');
</script>
</head>
<body>
<div id="pic">

</div>
</body>
</html>

js获取后台数据的更多相关文章

  1. js 获取后台数据分页

    页面创建一个存放内容的容器,以及分页的容器: <div id="content"></div> <div id="pager"&g ...

  2. 通过js获取前台数据向一般处理程序传递Json数据，并解析Json数据，将前台传来的Json数据写入数据库表中

    摘自:http://blog.csdn.net/mazhaojuan/article/details/8592015 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来 ...

  3. Struts1.x下使用jquery的Ajax获取后台数据

        jquery中有多种Ajax方法来获取后台数据,我使用的是$.get()方法,具体的理论我不解释太多,要解释也是从别的地方copy过来的.下面就介绍我的项目中的实现方法.     前台页面: ...

  4. Java获取后台数据，动态生成多行多列复选框

    本例目标: 获取后台数据集合,将集合的某个字段,比如:姓名,以复选框形式显示在HTML页面 应用场景: 获取数据库的人员姓名,将其显示在页面,供多项选择 效果如下: 一.后台 查询数据库,返回List ...

  5. 用ajax获取后台数据，返回json数据，怎么在前台使用？

    用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...

  6. Js获取后台集合List的值和下标的方法

    Js获取后台集合List的值和下标的方法 转载自:http://blog.csdn.net/XiaoKanZheShiJie/article/details/47280449 首先用的是struts2 ...

  7. 前台通过ajax获取后台数据，PHP如何返回中文数据

    现在经常使用Ajax调用后台php获取后台数据,但是PHP返回的数据如果含有中文的话,Ajax会无法识别,那咋整呢,我用的是比较笨的方法,但是实用: 方法一: echo urldecode(json_ ...

  8. bootstrap table通过ajax获取后台数据展示在table

    1. 背景 bootstrap table 默认向后台发送语法的dataType为 json,但是为了解决跨域问题我们需要将dataType改为jsonp,这时就需要修改bootstrap table ...

  9. Vue axios异步获取后台数据alert提示undefined

    记录一个小问题,关于分页查询套餐 前台通过axios异步请求获取后台数据alert弹出数据提示undefined 下面有三个bean PageResult /** * 分页结果封装对象 */ publ ...

随机推荐

  1. 17Aspectij

    17Aspectij-2018/07/31 1.Aspectj基于xml 前置通知 method : 通知,及方法名 pointcut :切入点表达式,此表达式只能当前通知使用. pointcut-r ...

  2. 洛谷——P1775 古代人的难题_NOI导刊2010提高（02）&& P1936 水晶灯火灵（斐波那契数列）

    P1775 古代人的难题_NOI导刊2010提高(02) P1936 水晶灯火灵 斐波那契数列 1．x,y∈[1…k],且x,y,k∈Z 2.(x^2-xy-y^2)^2=1 给你一个整数k,求一组满 ...

  3. Python&机器学习总结(一)

    ① numpy中np.c_和np.r_ np.r_是按列连接两个矩阵,就是把两矩阵上下相加,要求列数相等,类似于pandas中的concat(). np.c_是按行连接两个矩阵,就是把两矩阵左右相加, ...

  4. 剑指offer---以O(1)时间删除链表节点

    问题:删除链表节点 要求:以O(1)时间 对于删除指定索引的链表元素大家都很熟悉,思路一般是从头遍历链表直到指定索引位置删除元素,然后维护一下指针即可,时间复杂度O(n).代码如下: // 删除pos ...

  5. 洛谷 2866 [USACO06NOV]糟糕的一天Bad Hair Day

    [题意概述] 给出一个长度为n的序列a,求有多少对[i,j]满足i<j且a[i]>max(a[i+1],a[i+2],...,a[j]). [题解] 单调栈. 倒着处理序列的元素,维护一个 ...

  6. BZOJ 4819 Luogu P3705 [SDOI2017]新生舞会 (最大费用最大流、二分、分数规划)

    现在怎么做的题都这么水了.. 题目链接: (bzoj) https://www.lydsy.com/JudgeOnline/problem.php?id=4819 (luogu) https://ww ...

  7. Leetcode 135.分糖果

    分发糖果 老师想给孩子们分发糖果,有 N 个孩子站成了一条直线,老师会根据每个孩子的表现,预先给他们评分. 你需要按照以下要求,帮助老师给这些孩子分发糖果: 每个孩子至少分配到 1 个糖果. 相邻的孩 ...

  8. ZOJ 1654 Place the Robots

    题目大意: 在空地上放置尽可能多机器人,机器人朝上下左右4个方向发射子弹,子弹能穿过草地,但不能穿过墙, 两个机器人之间的子弹要保证互不干扰,求所能放置的机器人的最大个数 每个机器人所在的位置确定了, ...

  9. SGU -1500 - Pass Licenses

    先上题目: 1500. Pass Licenses Time limit: 2.5 secondMemory limit: 64 MB A New Russian Kolyan believes th ...

  10. CF671C. Ultimate Weirdness of an Array

    n<=200000个<=200000的数问所有的f(i,j)的和,表示去掉区间i到j后的剩余的数字中任选两个数的最大gcd. 数论日常不会.. 先试着计算一个数组:Hi表示f(l,r)&l ...