<!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. Gym - 101670G Ice cream samples（CTU Open Contest 2017 尺取法）

    题目: To encourage visitors active movement among the attractions, a circular path with ice cream stan ...

  2. Nginx+Tomcat简单负载均衡

    Nginx,Apache安装完成 复制Tomcat:    tomcat-8080    tomcat-8081 启动Tomcat8080: cd /usr/local/tomcat-8080/bin ...

  3. (四)Python3 循环语句——for

    for循环的一般格式如下: for <variable> in <sequence>: <statements> else: <statements> ...

  4. my first emacs custom key binding

    (defun comment-this-level ()  (interactive)  (move-beginning-of-line 1)  (set-mark-command nil)  (fo ...

  5. 次小生成树 判断 unique MST

    Given a connected undirected graph, tell if its minimum spanning tree is unique. Definition 1 (Spann ...

  6. NOIP2013 提高组合集

    NOIP 2013 提高组 合集 D1 T1 转圈游戏 快速幂裸题 #include <iostream> #include <cstdio> #include <cst ...

  7. 洛谷—— P3385 【模板】负环

    题目描述 暴力枚举/SPFA/Bellman-ford/奇怪的贪心/超神搜索 输入输出格式 输入格式: 第一行一个正整数T表示数据组数,对于每组数据: 第一行两个正整数N M,表示图有N个顶点,M条边 ...

  8. angularjs 过滤多组数据

    <html> <head> <script src="angular.min.js"></script> <script ty ...

  9. 内核信号处理 & CPU8个通用寄存器

    内核信号处理参考: http://www.spongeliu.com/165.html 信号本质上是在软件层次上对中断机制的一种模拟(注意区分中断.异常.信号),其主要有以下几种来源: 程序错误:除零 ...

  10. Alcatel OmniSwitch 重置密码

    OmniSwitch 6250重置密码 Press s to STOP AT MINIBOOT... [Miniboot]->cd "network" value = 0 = ...