JavaScrip+ajax解析json格式

最新推荐文章于 2024-05-22 16:28:20 发布

Action-人生

最新推荐文章于 2024-05-22 16:28:20 发布

阅读量53

点赞数

分类专栏： JavaScript 文章标签： ajax javascript ViewUI

本文链接：https://blog.csdn.net/luopo007liuchao007/article/details/84541577

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<%@ 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"
   }

]