用户操作界面postalcode.html
页面中包含3个文本框，分别表示邮政编码、地区和城市信息。当用户输入邮政编码后，系统将自动从服务器读取地区和城市信息，填充到对应文本框中。详细的函数说明请参考代码中的注释。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>根据邮政编码获取省市信息</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript">
var xmlHttp; //用于保存XMLHttpRequest对象的全局变量
//用于创建XMLHttpRequest对象
function createXmlHttp() {
//根据window.XMLHttpRequest对象是否存在使用不同的创建方式
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest(); //FireFox、Opera等浏览器支持的创建方式
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE浏览器支持的创建方式
}
}
//仅允许输入数字
function checkNumber() {
//判断输入字符的keyCode，数字在48~57之间，超出部分返回false
if ((event.keyCode >= 48) && (event.keyCode <= 57)) {
event.returnValue = true;
} else {
event.returnValue = false;
}
}
//获取地区信息的调用函数
function getPostalCode() {
var pCodeValue = document.getElementById("postalCode").value; //获取输入的邮政编码
//当输入的邮编长度刚好等于6时，利用XmlHttpRequest对象向服务器发出异步请求
if (pCodeValue.length == 6) {
createXmlHttp(); //创建XmlHttpRequest对象
xmlHttp.onreadystatechange = writeAreaInfo;
xmlHttp.open("GET", "postalcode.jsp?postalCode=" + pCodeValue, true);
xmlHttp.send(null);
}
}
//获取地区信息的回调函数
function writeAreaInfo() {
if (xmlHttp.readyState == 4) {
var areaInfo = xmlHttp.responseText; //取得地区信息
//当地区信息包含数据时将信息写回到文本框中
if (areaInfo != "") {
var infoArray = areaInfo.split("|"); //将地区信息使用“|”分割成数组
//数组第一部分写入area文本框
document.getElementById("area").value = infoArray[0];
//数组第二部分写入city文本框
document.getElementById("city").value = infoArray[1];
}
}
}
</script>
</head>
<body>
<h1>请输入邮政编码</h1>
<p>邮政编码：<input type="text" id="postalCode" οnkeypress="checkNumber()" οnblur="getPostalCode()"></p>
<p>地区：<input type="text" id="area"></p>
<p>城市：<input type="text" id="city"></p>
</body>
</html>
2614
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
