<!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. iframe使用大全

    <iframe src=”you page’s url” width=”100″ height=”30″ frameborder=”no” border=”0″ marginwidth=”0″ ...

  2. 洛谷 2777 [AHOI2016初中组]自行车比赛

    [题解] 为了让某个选手能够获得总分第一,就让他最后一天的得分是n,并且让别的选手的得分的最大值尽量小.于是我们先把目前积分排序,并且让他们最后一天的排名刚好与积分排名相反.即某个积分排名为X的人最后 ...

  3. JavaSE 学习笔记之新特性之泛型（二十）

    泛型:jdk1.5版本以后出现的一个安全机制.表现格式:< > 好处: 1:将运行时期的问题ClassCastException问题转换成了编译失败,体现在编译时期,程序员就可以解决问题. ...

  4. 使用lombok提高编码效率-----不用写get set

    使用lombok提高编码效率-----不用写get    set https://blog.csdn.net/v2sking/article/details/73431364

  5. HDU 2242 连通分量缩点+树形dp

    题目大意是: 所有点在一个连通图上,希望去掉一条边得到两个连通图,且两个图上所有点的权值的差最小,如果没有割边,则输出impossible 这道题需要先利用tarjan算法将在同一连通分量中的点缩成一 ...

  6. 分块试水--CODEVS5037 线段树练习4加强版

    感觉这才算入门题吧..前面那些线段树练习,改几个字符就过了一定要搞成几道题.. n<=2e5的数列,给常数K<=2e5,m<=2e5个操作,区间加,问一个区间里K的倍数. 这题空间? ...

  7. 解决使用myeclipse电脑卡的问题

    1. 原因:myeclipse会自动更新,因此会占用大量内存 2. 解决方法: (1)window->Perferences->General->Startup and Shutdo ...

  8. Tomcat启动时SecureRandom超级慢的问题

    https://my.oschina.net/wangnian/blog/687914

  9. $inject的用法

    controller后面的$inject是用来注入函数的变量名称的

  10. Javascript网址跳转方法

    第一种: window.location.href="http://www.baidu.com"; 第二种: window.navigate("http://www.ba ...