快速输入地址

最新推荐文章于 2021-07-24 01:41:49 发布

pxcong007

最新推荐文章于 2021-07-24 01:41:49 发布

阅读量162

点赞数

分类专栏： Ajax 文章标签： DWR Java JavaScript 浏览器 ViewUI

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏


<html>
<head>  
	<script type='text/javascript' src='/DWR/dwr/interface/AddressLookup.js'></script>
	<script type='text/javascript' src='/DWR/dwr/engine.js'></script>
	<script type='text/javascript' src='/DWR/dwr/util.js'></script>
	<script type="text/javascript">
		function fillAddress() {
			var postcode = dwr.util.getValue("postcode");
			AddressLookup.fillAddress(postcode, function(address) {
				dwr.util.setValues(address);
			});
		}
	</script>
</head>
<body>
<table>
	<tr>
		<td>Zipcode/Postcode:</td>
		<td><input id="postcode" type="text" onchange="fillAddress()" /></td>
	</tr>
	<tr>
		<td>House name/number:</td>
		<td><input id="house" type="text" /></td>
	</tr>
	<tr>
		<td>Line 2:</td>
		<td><input id="line2" type="text" /></td>
	</tr>
	<tr>
		<td>Line 3:</td>
		<td><input id="line3" type="text" /></td>
	</tr>
	<tr>
		<td>Line 4:</td>
		<td><input id="line4" type="text" /></td>
	</tr>
</table>

</body>
</html>

当焦点离开postcode字段的时候，浏览器将调用onchange事件，

function fillAddress() {
  var postcode = dwr.util.getValue("postcode");
  AddressLookup.fillAddress(postcode, function(address) {
    dwr.util.setValues(address);
  });
}

上述代码首先获得postcode 字段的值，然后使用postcode值执行对服务器端的调用。
当从服务器端返回时，我们使用setValues()函数将返回的值设置到form中。

在服务器端，我们可以使用一个JavaBean来保存Address数据，但对于本例，我们使用了
一个java.util.Map，只要JavaBean中各字段的名字和Map的键的名字一致，我们可以对JavaScript不做任何修改就可以将Map替换为JavaBean。