Ajax使用范例【原创】

以下是一个例子，以后遇到需要Ajax的地方，都可以参考。实现效果是在页面选择地区load出下级地市的效果。

jsp页面：

写道

<div id="infoL"> 
<span class="text1"> 所属地区:<input type="checkbox" 
onclick="getProvince();" /><!-- 这里触发的getProvince()就调用到了ajax，从后台读数据--> </span> 
</div> 
<div id="infoR"> 
<span class="inputL"> <span id="province"style="display: none"><!-- 以后这里要实时生成ajax传过来的数据的 --> </span></span> 
</div>

 

 getProvince()对应的js代码：

写道

/** 创建异步数据传输对象 */ 
var xmlHttp; 
function createXmlHttp() 
{ 
if (window.XMLHttpRequest) 
{ 
xmlHttp = new XMLHttpRequest(); 
} else 
{ 
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
} 
/** 获取省级地区信息**/ 
function getProvince() <!-- 就是这个！一定要有个 createXmlHttp，还有showProvinceMessage来实现利用返回的信息添加在页面上的操作-->
{ 
createXmlHttp(); 
xmlHttp.onreadystatechange = showProvinceMessage; <!-- 个人感觉这一句应该在open之后，因为open了才会去后台读数据来show返回的message啊 -->
xmlHttp.open("GET", "term_getProvince.do", true); <!-- 这里写处理的类（此处用struts2.0） -->
xmlHttp.send(null); 
} 
/** 
* 显示省级地区信息. 
**/ 
function showProvinceMessage() 
{ 
if (xmlHttp.readyState == 4) 
{ 
document.getElementById("province").innerHTML = ""; 
var messageText = xmlHttp.responseText;  <!-- 这里的返回数据对应着处理类里面的return 我们这时候的return是一个html字符，接下来会说明 -->
if (messageText != "") 
{ 
document.getElementById("province").innerHTML += messageText; 
document.getElementById("province").style.display = ""; 
document.getElementById("cities").style.display = "none"; 
document.getElementById("areas").style.display = "none"; 
} else 
{ 
document.getElementById("province").style.display = "none"; 
document.getElementById("cities").style.display = "none"; 
document.getElementById("areas").style.display = "none"; 
} 
} 
}

 

 后台处理类getProvince的内容：

写道

public final String getProvince() 
{ 
// 获取省级地区信息 
provinces = areaService.findAreasByAreaLevel(1); 
if (provinces == null || provinces.isEmpty()) 
{ 
logger.info("*** provinces is empty. ***"); 
Area a = new Area(); 
a.setAreaName("--暂无可用的省级地区信息--"); 
provinces.add(a); 
} 
return "getProvince"; 
}

  

其中的findAreasByAreaLevel方法为：

			String sql = "from Area as a where a.areaLevel=:argAreaLevel";

			logger.info("*** findAreasByAreaName sql is:  " + sql);
			Query query = sessionFactory.getCurrentSession().createQuery(sql);
			query.setInteger("argAreaLevel", areaLevel);
			return query.list();

  

返回符合条件的list。然后return的是 "getProvince" 我们现在看看最终这个 "getProvince"如何把后台操作的数据显示出来，它返回的是一个jsp页面peovice.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<s:select id="provinces" name="provinceId" headerKey="-1"
	headerValue="--请选择--" list="provinces" listKey="id"
	listValue="areaName" onchange="getCitiesOfProvince();"
	cssClass="validate-selection" /> <!-- 这时候发现，这里显示的lsit取值依据，就是上面处理类那里出现的那个接受值provinces  然后再把上面第一个jsp的display变为可视，就大功告成了-->

 

评论

2 楼 ml365 2011-02-11  

gougou851129 写道

最原始的ajax代码
估计现在大家都用框架了

gougou851129 写道

最原始的ajax代码
估计现在大家都用框架了

哦哦！请问下现在用的框架有哪些？让我也学习学习，呵呵。

1 楼 gougou851129 2011-02-10  

最原始的ajax代码
估计现在大家都用框架了