【转】struts2 中利用ajax实现异步提交(不需刷新全部页面)

此处介绍的是类似QQ签名的功能实现,textarea失去焦点时异步提交

index.jsp关键代码如下:

第一步:页面编写 其他控件也可,不限于textarea

<s:form action="" method="post">

<div >

<p > 今日心情:</p>

<p >

<textarea id="ta" name="signature" οnblur="ajax_submit();" ><s:property value="user.signature"/> //siganature 是user对象的一个属性

</textarea>

</p>

</div>

</s:form>

第二步:在上述页面<head></head>之间加入如下js

<script language="javascript">

//定义一个变量用于存放XMLHttpRequest对象

var xmlHttp;

//改函数用于创建一个XMLHttpRequest对象

function createXMLHttpRequest(){

if(window.ActiveXObject){

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}else if(window.XMLHttpRequest){

xmlHttp = new XMLHttpRequest();

}

}

//这是一个启动AJAX异步通信的方法

function ajax_submit(){

var signature = document.getElementById("ta").value;

//创建一个XMLHttpRequest对象

createXMLHttpRequest();

//将状态绑定到一个函数

xmlHttp.onreadystatechange=processAjaxSignature;

//通过GET方法向指定的URL建立服务器的调用

var url="updateSignature.action?signature="+signature;

xmlHttp.open("GET",url,true);

//发送请求

xmlHttp.send(null);

}

//这是一个用来处理状态改变的函数

function processAjaxSignature(){

//定义一个变量用于存放 从服务器返回的响应结果

var responseContext="";

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

responseContext = xmlHttp.responseText;

document.getElementById("ta").value=responseContext;


}

}

}

</script>

第三步:编写action类 关键代码

//待导入包省略

public class UpdateSignatureAction extends ActionSupport implements ServletRequestAware{

public String execute(){

String responseText="";

//读取请求的参数

HttpServletRequest request = ServletActionContext.getRequest();

responseText=request.getParameter("signature");

responseText=new String(responseText.getBytes("ISO-8859-1"),"GBK"); //去掉此行,会出现乱码

HttpServletResponse response = ServletActionContext.getResponse();

response.setContentType("text/plain");//设置输出为文字流

response.setCharacterEncoding("UTF-8");

PrintWriter out = response.getWriter();

//直接输出响应的内容

out.println(responseText);

out.flush();

out.close();

其他将签名持久化到数据库的操作略去

return null;

}

}

4 配置 struts.xml

<action name="updateSignature"

class="包路径.UpdateSignatureAction">

<result >/index.jsp</result>

</action>