实现JSP页面-阿里云开发者社区

实现JSP页面

2017-11-17 837

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

为了更简单地实现Ajax交互，本页面使用了另一个JavaScript框架：Prototype.js。通过使用该框架，可以更加简单地访问页面中的DOM节点，包括更好地实现Ajax交互。这样避免去做创建XMLHttpRequest对象、发送异步请求这些烦琐的步骤。

下面是该JSP页面的代码。

程序清单：codes\04\4.6\struts2json\first.jsp

<%@ page contentType="text/html; charset=GBK" language="java" errorPage="" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!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>使用JSON插件</title>
<script src="${pageContext.request.contextPath}/prototype-1.6.1.js"
type="text/javascript">
</script>
<script type="text/javascript">
function gotClick()
{
//请求的地址
var url = 'JSONExample.action';
//将favorite表单域的值转换为请求参数
var params = Form.serialize('form1');
//创建Ajax.Request对象，对应于发送请求
var myAjax = new Ajax.Request(
url,
{
//请求方式：POST
method:'post',
//请求参数
parameters:params,
//指定回调函数
onComplete: processResponse,
//是否异步发送请求
asynchronous:true
});
}
function processResponse(request)
{
//使用JSON对象将服务器响应解析成JSON对象
var res = request.responseText.evalJSON();
//遍历JSON对象的每个属性
for(var propName in res)
{
$("show").innerHTML += propName + " --> "
+ res[propName] + "<br/>";
}
}
</script>
</head>
<body>
<s:form id="form1">
<s:textfield name="field1" label="Field 1"/>
<s:textfield name="field2" label="Field 2"/>
<s:textfield name="field3" label="Field 3"/>
<tr><td colspan="2">
<input type="button" value="提交" onclick="gotClick();"/>
</td></tr>
</s:form>
<div id="show">
</div>
</body>
</html>

在上面的页面中使用了Prototype.js的Ajax.Request来完成Ajax交互。为了使用Prototype.js，当然需要在该页面中导入Prototype.js的代码库。

上面的页面代码中直接调用了字符串的evalJSON()，该方法用于将符合JSON格式的字符串解析为一个JSON对象——上面的程序将服务器响应的字符串解析成JSON对象，这个JSON对象完整地保存了Action实例的状态信息。

在浏览器中浏览该页面，如果在上面三个表单域中完成输入，然后单击“提交”按钮，将看到如图4.38所示的页面。

正如图4.38中所看到的，页面可以取得整个Action实例的状态信息，包括Action实例里的每个属性名，以及对应的属性值。既然我们获得了整个Action的状态信息，就完全获得了Struts 2对该请求的处理结果，最后剩下的事情就是：通过DOM操作把这些处理结果显示出来。关于如何利用DOM动态改变HTML页面内容，请参考疯狂Java体系的《疯狂Ajax讲义》一书。