JavaScrip+ajax解析json格式

Action-人生

浏览: 105733 次
性别:
来自: 南京

最近访客更多访客>>

gumuzhiyu

xxi

Flemming323

guochongcan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

ajax javascript

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
    <script type="text/javascript" src="extjs/ext.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>
    
    <style type="text/css">
      td{
         text-align:center;
         color:#333333;
         font-size:12px;
      }
      th{
         color:#aaaaaa;
         font-size:13px;
       }
    </style>
  </head>
  <script type="text/javascript" language="javascript">
     function getXMLHttpRequest(){
       var xhr;
       try{
          xhr=new XMLHttpRequest();
       }catch(err1){
           
           try{
              xhr=new ActiveXObject("Microsoft.XMLHTTP");
           }catch(err2){
             alert("您的浏览器不支持ajax");
           }
       
       }
     
       return xhr;
     }
     
     function $(id){
        return document.getElementById(id);
     }
     
     
     function saxJson(){
       
       var xhr=getXMLHttpRequest();
       
       xhr.open("GET","json.jsp",true);
       xhr.send();
       xhr.onreadystatechange=function(){
       if(xhr.readyState==4 && xhr.status==200) {
         
         alert(xhr.responseText);
         
         var stus=eval("("+xhr.responseText+")");
         var tby=$("tby");
        // var tby=document.getElementById("tby");
        
         for(var i=0;i<stus.length;i++){
           
           var tr=document.createElement("tr");
           var ntd=document.createElement("td");
           var std=document.createElement("td");
           var atd=document.createElement("td");
           var etd=document.createElement("td");
           
           ntd.innerHTML=stus[i].name;
           alert("ntd.innerHTML:"+ntd.innerHTML);
           std.innerHTML=stus[i].sex;
           atd.innerHTML=stus[i].age;
           etd.innerHTML=stus[i].email;
           
           tr.appendChild(ntd);
           tr.appendChild(std);
           tr.appendChild(atd);
           tr.appendChild(etd);
           
           tby.appendChild(tr);
           }
         }
        }
     
     }
  </script>
  <body onload="saxJson();"> 
     <h2 align="center" style="color:#666666;" >js解析json案例</h2>
     <div id="display" align="center">
         <table style="border-collapse:collapse" cellspacing="0"
         cellpadding="3" id="tb1" border="1" width="360">
         <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>邮箱</th>
            </tr>    
         </thead>
         <tbody id="tby">
           
         </tbody>   
         
         </table>
        
     </div>
     <br>
     <div align="center" style="font-size:12px;color:#333333">
              来自于Copyright&copyCSDN Corporation 2010-2011  孔雀王子and liuchao 修改
     </div>
     
  </body>
</html>

json.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
student=[
   {
     name:"liuchao",
     sex:"boy",
     age:25,
     email:"1074213947@qq.com"
   },
   {
     name:"liuchao2",
     sex:"boy2",
     age:23,
     email:"1074213947@qq.com"
   },
      {
     name:"liuchao3",
     sex:"boy3",
     age:20,
     email:"1074213947@qq.com"
   }

]