json小例子

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="jquery.1.9.0.min.js"></script>

</head>

<body>

<div class="div1">

<div class="item">

<ul>

<li>

<h2>1</h2>

<p>1</p>

</li>

<!--<li>-->

<!--<h2>2</h2>-->

<!--<p>2</p>-->

<!--</li>-->

<!--<li>-->

<!--<h2>3</h2>-->

<!--<p>3</p>-->

<!--</li>-->

<!--<li>-->

<!--<h2>4</h2>-->

<!--<p>4</p>-->

<!--</li>-->

</ul>

</div>

</div>

</body>

<script>

var json = {

list: [

{

id: 1,

title: "标题1"

},

{

id: 2,

title: "标题2"

},

{

id: 3,

title: "标题3"

},

{

id: 4,

title: "标题4"

},

{

id: 5,

title: "标题5"

},

{

id: 6,

title: "标题6"

},

{

id: 7,

title: "标题7"

}

]

}

var num = json.list,

page = Math.ceil(num.length / 4),

wrap = $(".div1"),

itemArray = [];

html = "";

var contant = "";

for (var j = 0; j < num.length; j++) {

contant = " <li>"

+ "<h2>" + num[j].id + "</h2>"

+ "<p>" + num[j].title + "</p>"

+ "</li>";

itemArray.push(contant);

}

console.log(itemArray);

for (var i = 0; i < page; i++) {

var item = "";

for (var n = 0; n < 4; n++) {

if (i * 4 + n < num.length) {

item += itemArray[i * 4 + n];

}

}

html += ‘<div class="item">‘

+ ‘<ul>‘

+ item

+ ‘</ul>‘

+ ‘ </div>‘

//        console.log(html);

}

wrap.html(html);

//    console.log(html);

</script>

</html>

时间: 2024-10-19 05:31:08

json小例子的相关文章

Struts2 ajax json小例子

1:首先要解决jar包的问题,我最近一直用maven搭建项目,所以把pom.xml复制到这. 要有struts2的核心包,struts2和Json整合的包,以及json lib.刚才转载了一篇解决json lib老是报错的博客,问题完美解决. <dependencies> <dependency> <groupId>org.apache.struts</groupId> <artifactId>struts2-json-plugin</ar

android:json解析的两个工具:Gson和Jackson的使用小例子

1.简介 json是android与服务器通信过程中常用的数据格式,例如,如下是一个json格式的字符串: {"address":"Nanjing","name":"NUPT","students":[{"name":"stu1","id":"10000","age":20},{"name"

php+jquery+ajax+json简单小例子

直接贴代码: Php代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Content-Type:text/html;charset=utf-8"); ?> <head> <script type="text/javascript" src="http://code.jquery.com/jquery.min.j

java即时通信小例子

学习java一段时间了,今天写来一个即时通信的小例子练手在其过程中也学到了一些知识拿出来和大家分享,请路过的各位大神多多赐教... 好了下面讲一下基本的思路: 首先,编写服务器端的程序,简单点说吧就是在服务上开启一个线程循环等待客户端的连接,为每一个连接到服务器的Socket 创建一个实例存放在集合中,然后使用InputSteam读取从客户端发过来的数据然后转发给除自己之外的所有的客户端 然后是客户端,首先开启一个线程连接都服务器端,循环监听服务器发送回来的数据 这里要说一下为了明确是谁发出的消

C语言访问webservice小例子

近期做的一个项目中,需要访问webservice获取一些json格式的数据.返回的页面内容只是json格式的数据,并不像实际页面那么复杂.所以不想再引入工具库,直接用socket简单实现了. 以下代码并不是实际项目源码,是我摘取出来整理成的一个小例子分享给大家.代码本身很容易理解,但是需要一些socket编程和http协议基础. #include <stdio.h> #include <sys/socket.h> #include <netinet/in.h> #inc

小例子:通用模块——文本框默认提示信息

小例子:通用模块——文本框默认提示信息 因为H5的属性 不兼容所有浏览器 <input type="search" name="" placeholder="提示信息" /> 所以有下面写法: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <met

SpringMVC+hibernate整合小例子,用户的增删查改

SpringMVC+hibernate整合小例子,用户的增删查改 对于使用框架写项目,我的第一反应的把所有需要的jar文件引入. 因为我用的是JDK1.8,当使用spring3.2 注解的时候会出现问题,所以最终使用的spring4.0.  hibernate使用的版本为4.0 .至于一些依赖包的版本就是看别人的资料拿的. 然后看下整体的项目结构 第一步写的是web.xml配置文件,当然有写东西是后面加上去的,不是一步到位的,比如说控制post方式的乱码.以及无法时候JS文件等一些静态文件,后面

Java处理文件小例子--获取全国所有城市的坐标

需求:前端展示数据,全国城市的坐标 这个是 echarts 的 制作地图JSON 工具, 但是没有全国的,只有各个省 前端需要的数据:    所以现在 下载所有的省数据: 然后是Java处理. 这是这里重点, 在开发中, 很多繁琐的事 ,我们都可以用程序来控制: package cn.ycmedia.common.utils; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; i

laravel 数据库操作小例子

public function demo() { $res = null; //insert数据插入 //$user=array('username'=>'joy','password'=>'123456','age'=>23); //$res = DB::table('users')->insert($user); /* 数据查询 $res = DB::table('users')->where('username','joy')->get(); $res = DB: