<!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. TWaver动画之雷达扫描效果

    UI和功能是好的产品的两个重要因素,很多产品往往只注重功能上的设计,而忽略了UI.在这个“看脸”的时代,就算产品的功能很强大,如果UI跟不上步伐,你的产品都会在客户心中大打折扣.做安全和监控的项目中经 ...

  2. 我已经迷失在事件环(event-loop)中了【Nodejs篇】

    我第一次看到他事件环(event-loop)的时候,我是一脸懵,这是什么鬼,是什么循环吗,为什么event还要loop,不是都是一次性的吗? 浏览器中和nodejs环境中的事件环是有一些区别的,这里我 ...

  3. freopen的各种错误姿势

    本弱鸡已经触发的错误姿势: freoprn("railway.in","r",stdin); freopen("railway.cpp",& ...

  4. python实现定时发送qq消息

    因为生活中老是忘记各种事情,刚好又在学python,便突发奇想通过python实现提醒任务的功能(尽管TIM有定时功能),也可定时给好友.群.讨论组发送qq消息.其工作流程是:访问数据库提取最近计划— ...

  5. Django-django-redis使用

    自定义连接池 这种方式跟普通py文件操作redis一样,代码如下: views.py import redis from django.shortcuts import render,HttpResp ...

  6. 洛谷月赛2018.8 T1题解(U28036 Nagisa loves Tomoya)

    [题解] 我们设原来的数组为a1,a2,a3..., 那么一次操作之后的数组变为a1+a2,a2+a3,a3+a4..., 两次操作之后数组变为a1+2a2+a3,a2+2a3+a4,a3+2a4+a ...

  7. 《编译原理》构造 LL(1) 分析表的步骤 - 例题解析

    <编译原理>构造 LL(1) 分析表的步骤 - 例题解析 易错点及扩展: 1.求每个产生式的 SELECT 集 2.注意区分是对谁 FIRST 集 FOLLOW 集 3.开始符号的 FOL ...

  8. Shiro_DelegatingFilterProxy

    1.DelegatingFilterProxy实际上是Filter的一个代理对象.默认情况下,Spring会到IOC容器中查找与<filter-name>对应的filter bean.也可 ...

  9. JavaEE最新技术整理--新技术

    JavaEE最新技术整理-----https://blog.csdn.net/qq_21683643/article/details/79747922

  10. Linux上安装Hadoop集群(CentOS7+hadoop-2.8.0)--------hadoop环境的搭建

    Linux上安装Hadoop集群(CentOS7+hadoop-2.8.0)------https://blog.csdn.net/pucao_cug/article/details/71698903 ...