今天想用json技术做一个小例子,结果用到下面的代码后,页面中单击test不起作用
<span style="font-size:18px;"> <a href="javascript:;" οnclick="f1();" >test</a></span>
仔细查找了原因,发现实际问题是javascript里面的代码写错了
<span style="font-size:18px;">function f1(){
var str="{'name':'zs','age':22}";
alert("hello55");
var obj=str.evalJSON();
alert("hello");
alert(obj.name);
}</span>
通过验证,发现只能执行到输出“hello55”,说明str.evalJSON()这一句有问题,查看了网页源码后,发现prototype-1.6.0.3.js包引用路径有问题
修改prototype-1.6.0.3.js包的引用路径,修改后的包路径为:
<span style="font-size:18px;"><script type="text/javascript" src="system/teacher/js/prototype-1.6.0.3.js"></script></span>
<span style="font-size:18px;">再次尝试,可以弹出三个对话框,成功</span>
完整的jsp页面代码:
<span style="font-size:18px;"><%@ 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 'json.jsp' starting page</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<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="styles.css">
-->
<script type="text/javascript" src="system/teacher/js/prototype-1.6.0.3.js"></script>
<script type="text/javascript">
//将json字符串转换成js对象
function f1(){
var str="{'name':'zs','age':22}";
alert("hello55");
var obj=str.evalJSON();
alert("hello");
alert(obj.name);
}
//将json字符串转换成js对象数组
function f2(){
var str="[{'name':'zs','age':22},{'name':'ww','age':32}]";
var objs=str.evalJSON();
alert(objs[1].name);
}
function f3(){
alert("hello!");
}
</script>
</head>
<body>
<a href="javascript:;" οnclick="f1();" >test</a>
</body>
</html>
</span>