<!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. 04StringBuffer相关知识、Arrays类、类型互换、正则、Date相关

    04StringBuffer相关知识.Arrays类.类型互换.正则.Date相关-2018.7.12 1.StringBuffer A:StringBuffer的构造方法: public Strin ...

  2. springmvc视图解析

    SpringMVC 视图解析的几种方式: 在视图解析的过程中,需要知道逻辑view的名字,model的名字以访问model和view. 使用jsp进行解析,InternalResourceViewRe ...

  3. HDU - 2018 - 母牛的故事（dp）

    题意: 如题 思路: 递推的思想,牛只能在第4年才能开始生小牛,对于 第n年有多少牛 = n-1年的牛数量 + 新出生的牛的数量 新出生的牛的数量 = 已经出生满4年的牛的数量 = n-3年时候牛的数 ...

  4. Mac 当xampp里mysql无法启动的解决办法

    sudo /Applications/XAMPP/xamppfiles/bin/mysql.server start

  5. react入门-----（jsx语法，在react中获取真实的dom节点）

    1.jsx语法 var names = ['Alice', 'Emily', 'Kate']; <!-- HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的 ...

  6. cocos2d 接 android sdk 的一个小坑 关于armbeabi 和 armbeabi-v7a

    cocos2d 接 android sdk 的时候,有些sdk会要求外链到某个工程中,而这个工程的lib文件夹里会包含armbeabi 和 armbeabi-v7a这两个文件夹,如果直接打包会闪退.只 ...

  7. POJ 1655 Balancing Act && POJ 3107 Godfather

    题目大意: 根据题目的图很好理解意思,就是记录每一个点的balance,例如 i 的balance就是把 i 从这棵树中除去后得到的森林中含有结点数最多 的子树中的节点个数,然后找到所有节点中对应的b ...

  8. 27、Java并发性和多线程-CAS（比较和替换）

    以下内容转自http://ifeve.com/compare-and-swap/: CAS(Compare and swap)比较和替换是设计并发算法时用到的一种技术.简单来说,比较和替换是使用一个期 ...

  9. [转]C++回调函数(callback)的使用

    原文地址:http://blog.sina.com.cn/s/blog_6568e7880100p77y.html 什么是回调函数(callback)    模块A有一个函数foo,他向模块B传递fo ...

  10. apache2 ubuntu18.04 配置虚拟端口

    修改3个文件/etc/apache2/apache2.conf/etc/apache2/ports.conf/etc/apache2/sites-available/000-default.conf ...