Json简单实例

1.html:

<!DOCTYPE html>
<html>
  <head>
    <title>show2.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript" src="js/student2.js"></script>
  </head>

  <body>
    <input type="button" onclick="Student2()" value="获取信息">

    <table border="1px" width="80%" align="center">
    	<thead><tr>
    		<th>学号</th>
    		<th>姓名</th>
    		<th>年龄</th>
    		<th>住址</th>
    	</tr></thead>
    	<tbody id="main" align="center">

    	</tbody>
    </table>
  </body>
</html>

2.js

//浏览器协议
var xmlHttp;
function creatXMLHttpRequest(){
	if(window.xmlHttpRequest){
		xmlHttp=new XMLHttpRequest();
	}else if(window.ActiveXObject){
		xmlHttp=new XMLHttpRequest("Microsoft,XMLHTTP");
	}
}
//触发函数
function Student2(){
	alert("aa");
	//建立异步请求对象
	creatXMLHttpRequest();
	//开启对服务器端的连接
	xmlHttp.open("post","student2.txt",true);
	//向浏览器发送请求
	xmlHttp.send();
	//调用回调函数
	xmlHttp.onreadystatechange=getStudent2;

}
function getStudent2(){

	//判断请求状态
	if(xmlHttp.readyState==4&&xmlHttp.status==200){
		//服务器传来的响应
		var msg=xmlHttp.responseText;
		var stus=eval("("+msg+")");
		tbody=document.getElementById("main");
		for(var i=0;i<stus.length;i++){
			var stuNo=stus[i].stuNo;
			var name=stus[i].name;
			var age=stus[i].age;
			var address=stus[i].address;

			tr=document.createElement("tr");

			td1=document.createElement("td");
			td1.innerHTML=stuNo;

			tr.appendChild(td1);

			td2=document.createElement("td");
			td2.innerHTML=name;
			tr.appendChild(td2);

			td3=document.createElement("td");
			td3.innerHTML=age;
			tr.appendChild(td3);

			td4=document.createElement("td");
			td4.innerHTML=address;
			tr.appendChild(td4);

			tbody.appendChild(tr);

		}
	}
}

3.txt

[
{"stuNo":"001","name":"jack","age":23,"address":"beijing"},
{"stuNo":"002","name":"bob","age":24,"address":"shanghai"},
{"stuNo":"003","name":"mary","age":26,"address":"anerick"},
{"stuNo":"004","name":"kity","age":26,"address":"hongkong"}
]

时间: 2024-10-31 22:21:21

Json简单实例的相关文章

迭代解析JSON简单实例

由于项目中遇到了这个问题,所以在这里记录一下. 比如:请求到的JSON串: 1 { 2 "msg":"数据获取成功", 3 "success":true, 4 "data":[ 5 { 6 "id":40, 7 "name":"美术", 8 "parentId":4, 9 "photoUrl":"[email prot

jQuery使用cookie与json简单实现购物车功能

本文实例讲述了jQuery使用cookie与json简单实现购物车的方法.分享给大家供大家参考,具体如下: 1.生成一个cookie 用来存储商品的id  String类型 2.添加商品id的时候 把cookie转化成数组,并检查是否已经包含了.没有包含用js push重新生成新的数组. 3.把数组转化成String 用cookie存储. 以下是jquery对cookie和JSON的操作方法 $.cookie("cart","ids",{expires:-7,pat

jQuery Datatable 实用简单实例

目标: 使用jQuery Datatable构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求.同时,jQuery Datatable强大的功能支持:排序,分页,搜索等. Query Datatable能良好支持数据完全加载到本地后构建数据列表,排序.分页.搜索等功能就会自带,不需要我们去关心,在此主要说明通过后台动态的加载数据,已达到在大数据面前提高效率的效果. 1. 通过后台进行分页 2. 通过后台进行排序 3. 通过后台进行搜索 具体使用方法: 1. 首先构建我们需要的数据列表,以

【zTree】简单实例与异步加载实例

[zTree]简单实例与异步加载实例 我们在项目中经常会需要用到树,这次按照数据库存储的特点重新了做一个小demo,使用zTree来实现这个功能. 简单实例: 首先我们需要在界面中引入代码,很简单,但是很重要,它用来存放加载的树. ps:添加ztree的引用,下载地址:http://www.ztree.me/v3/main.php#_zTreeInfo [html] view plain copy <span style="font-family:KaiTi_GB2312;font-siz

【MySQL】存储过程、游标、循环简单实例

有时候仅凭 sql 语句可能达不到想要的数据操作目的,有可能需要写一些方法体,通过循环判断等操作最终达到目的.那么在数据库里实现这种方法体就需要存储过程了,个人觉得一个带注释的简单实例可以简单粗暴地解决大部分问题,当然要深入学习了解的话还是要看教程文档了,话不多说,上码: [sql] view plain copy create procedure my_procedure() -- 创建存储过程 begin -- 开始存储过程 declare my_id varchar(32); -- 自定义

session 对象的简单实例

一个session对象的简单实例: 1.登录界面:使用简单的html表单提交界面. <%@ page language="java" contentType="text/html; charset=GB18030"    pageEncoding="GB18030"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht

javamail发送邮件的简单实例(转)

javamail发送邮件的简单实例 今天学习了一下JavaMail,javamail发送邮件确实是一个比较麻烦的问题.为了以后使用方便,自己写了段代码,打成jar包,以方便以后使用.呵呵 以下三段代码是我的全部代码,朋友们如果想用,直接复制即可. 第一个类:MailSenderInfo.java package com.util.mail;    /**    * 发送邮件需要使用的基本信息  *author by wangfun http://www.5a520.cn 小说520   */  

AJAX学习整理二之简单实例

做了几个简单的实例,加载txt文本内容.加载xml文件内容,把xml文本内容转换成html表格显示.废话不多说,直接贴代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head>     <title>通过ajax获取文本内容</title>     <meta charset="utf-8">     <scr

Spring+Struts 2 简单实例报空指针异常

空指针出现于Action注入位置..如果一般错误请检查配置文件. 我出的错误.在于拷贝了之前做的实例中的lib文件夹到这个工程中. 其中有个包为struts2-convention-plugin-2.3.16.3.jar 造成了包识别异常.出现空指针.有类似经历的可以查看,也给大家提个醒.不要一气呵成的导入所有包.容易出现混乱.也不利于大家清楚的认识包和代码的联系. Spring+Struts 2 简单实例报空指针异常,布布扣,bubuko.com