struts2 无刷新调用action 实现页面数据动态加载

js代码分为请求请求、处理返回两个函数。

<script type="text/javascript">

function test(ot){

//var url = "getData.jsp?username="+document.getElementById("username").value;

var url = "http://localhost:8080/localEshop/updateQuantity?pid="+document.getElementById("pid").value+"&ot="+ot;

//window.alert(url);

sendRequest(url);

}

var XMLHttpReq = false;

//创建XMLHttpRequest对象

function createXMLHttpRequest() {

if(window.XMLHttpRequest) { //Mozilla 浏览器

XMLHttpReq = new XMLHttpRequest();

}

else if (window.ActiveXObject) { // IE浏览器

try {

XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

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

} catch (e) {}

}

}

}

//发送请求函数

function sendRequest(url) {

createXMLHttpRequest();

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

XMLHttpReq.onreadystatechange = processResponse;//指定响应函数

XMLHttpReq.send(null); // 发送请求 ‚

}

// 处理返回信息函数

function processResponse() {

if (XMLHttpReq.readyState == 4) { // 判断对象状态 €

if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息

var result = XMLHttpReq.responseText;

document.getElementById("quantity").innerHTML = result;

} else { //页面不正常

window.alert(XMLHttpReq.status);

//window.alert("输入错误了");

}

}

}

</script>

Action 在接受请求完成处理后，执行response返回数据：

......(之前部分都是逻辑处理，不详述，数据可存到一个string中用作返回，还有其他一些方法，请参考其他资料)

//response the data to the webpage

String content="<div id=\"quantity\"><input type=\"submit\" onclick=\"test(0)\" value=\"-\">"+

cartMap.get(pid).getQuantity()+"<input type=\"submit\" onclick=\"test(1)\" value=\"+\"></div>";

//返回数据

ServletActionContext.getResponse().getWriter().print(content);

//return null 不刷新页面

return null;

注意：js函数在掉要网址请求数据时，一定要传参数与action要求的匹配，否则在某些浏览器会接受不到请求。

以上只写了一个调用的关键步骤，希望对大家有所帮助！