实现JSP页面-白红宇

实现JSP页面

阅读量：6880 次

发布时间：2019-06-27

本文共 1932 字，大约阅读时间需要 6 分钟。

为了更简单地实现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: proce***esponse,

//是否异步发送请求

asynchronous:true

});

}

function proce***esponse(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="提交" οnclick="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讲义》一书。