js中获取的json数据怎么展现在jsp页面上

JavaScript032

js中获取的json数据怎么展现在jsp页面上,第1张

有两种方法,一种是$.ajax(option)方法,一种是$.getJSON()方法。

实例:

一、数据集所在jsp页面out.jsp,代码如下

<%@page contentType="text/plaincharset=UTF-8"

language="java"

import="java.io.*,java.net.*,java.util.*"

buffer="8kb"

session="false"

autoFlush="true"

%>

<%

String jsonData="{data:[{id:200901,name:'name1'},{id:200902,name:'name2'},{id:200903,name:'姓名3'},{id:200904,name:'姓名4'},{id:200905,name:'姓名5'}]}"

//out.clear()

out.write(jsonData)

%>

二、js处理页面

(1)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>test</title>

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8"/>

<script type="text/javascript" language="javascript" src="js/jquery.js"></script>

<script type="text/javascript">

function getOut(){

var s=''

$.ajax({

type:'get',//请求方式

url:'out.jsp?id='+Math.random(), // AJAX HTTP请求接口

data:'',//提交到服务器接口的参数 比如'{cid:0405}',结果为out.jsp?cid=0405格式

dataType:'json',//请求类型为json, 更多见jquery doc文档

timeout:7000,//请求超时后停止请求

success: function(json){

var d=json.data

$.each(d,function(i){

s+=('<p>id:'+d[i].id +' | name:'+d[i].name+'</p><hr/>')

})

$('#out').html(s)}})

}

</script>

</head>

<body style="margin:20pxtext-align:centerbackground:#E5E5E5">

<input type="text" name="getdata" onclick="getOut()"/>

<div id="out">

</div>

</body>

</html>

(2)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<%@ page language="java" contentType="text/htmlcharset=utf-8"%>

<head>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script>

function showStudent(){

var s=''

$.getJSON("out.jsp?id="+Math.random(),function(json){

var d=json.data

for(var i=0i<d.lengthi++){

s+=('<p>id:'+d[i].id +' | name:'+d[i].name+'</p><hr/>')

}

$('#content').html(s)

})

}

</script>

</head>

<body>

<input type="button" value="获取学院信息" onclick="showStudent()" />

<div id="content"></div>

</body>

</html>

总结:

(1)有时候总是出现错误,原因在于——json数据格式有问题,前端$.getJSON()方法并没有什么错误。

(2)相对来说,$ajax(option)方法使用比较灵活,可以用在比较复杂的情况。

var

json

=

{

contry:{

area:{

man:"12万",

women:"10万"

}

}

}

//方式一:使用eval解析

var

obj

=

eval(json)

alert(obj.constructor)

alert(obj.contry.area.women)

//方式二:使用Funtion函数

var

strJSON

=

"{name:'json

name'}"//得到的JSON

var

obj

=

new

Function("return"

+

strJSON)()//转换后的JSON对象

alert(obj.name)//json

name

alert(obj.constructor)

//复杂一点的json数组数据的解析

var

value1

=

[{"c01":"1","c02":"2","c03":"3","c04":"4","c05":"5","c06":"6","c07":"7","c08":"8","c09":"9"},

{"c01":"2","c02":"4","c03":"5","c04":"2","c05":"8","c06":"11","c07":"21","c08":"1","c09":"12"},

{"c01":"5","c02":"1","c03":"4","c04":"11","c05":"9","c06":"8","c07":"1","c08":"8","c09":"2"}]

var

obj1

=

eval(value1)

alert(obj1[0].c01)

//复杂一点的json的另一种形式

var

value2

=

{"list":[

{"password":"1230","username":"coolcooldool"},

{"password":"thisis2","username":"okokok"}],

"array":[{"password":"1230","username":"coolcooldool"},{"password":"thisis2","username":"okokok"}]}

var

obj2

=

eval(value2)

alert(obj2.list[0].password)

==========================================

js 中读取JSON的方法探讨

js读取JSON的方法我接触到的有两种:

方法一:函数构造定义法返回

var strJSON = "{name:'json name'}"//得到的JSON

var obj = new Function("return" + strJSON)()//转换后的JSON对象

alert(obj.name)//json name

方法二:js中著名的eval函数

var strJSON = "{name:'json name'}"//得到的JSON

var obj = eval( "(" + strJSON + ")" )//转换后的JSON对象

alert(obj.name)//json name

第二种方法需要注意的是,对象表达式{'name':'json name'}必须用“()”扩住,否则

var strJSON = "{name:'json name'}"

var obj = eval(strJSON)

alert(obj.constructor)//String 构造函数

alert(obj.name)//undefine

必须把对象表达式扩起来eval执行才能生成一个匿名对象!