_Ajax编程_黑客防线网安服务器维护基地--Powered by WWW.RONGSEN.COM.CN

AJAX实例:根据邮编自动完成地址信息

作者:黑客防线网安Ajax教程基地 来源:黑客防线网安Ajax教程基地 浏览次数:0

本篇关键词:完成地址信息自动

  采用一个开源的AJAX库:Ajax Toybox

  描述:

  在注册或购物车结帐的时候需要用户填入个人资料这个环节可以简练一下,我们只需客人填入邮政编码,然后就根据这个邮政编码,自动从数据库中取出相应的�械鹊刂沸畔�这样既可以减少客户的输入,增加客户体验,又可以减少由于资料输入而产生的错误。

  实现:

HTML
<script>
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}

var http = createRequestObject();

function sndReq(zip) {
http.open('get', 'zipcode.php?zip='+zip);
http.onreadystatechange = handleResponse;
http.send(null);
}

function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
var update = new Array();

if(response.indexOf('|' != -1)) {
update = response.split('|');
document.getElementById("city").value = update[0];
document.getElementById("state").value = update[1];
}
}
}
</script>
<h3>Enter A United States Zipcode, Then Tab</h3>
<table align="center">
<tr>
<td>Enter Zipcode:</td>
<td><input type="text" id="zipcode" name="zipcode" onBlur="sndReq(this.value);"/></td>
</tr>
<tr>
<td>City:</td>
<td><input type="text" id="city" name="city"/></td>
</tr>
<tr>
<td>State:</td>
<td><input type="text" id="state" name="state"/></td>
</tr>
</table>

  以上是客户输入页面,下面是服务端的处理页面'zipcode.php

<?php
dbuser = 'root';
dbpass = '111111';

cn = mysql_connect("localhost", dbuser, dbpass);
db = mysql_select_db("ajax");

sql = "select city, state from zipcodes where zipcode = " . _REQUEST['zip'];
rs = mysql_query(sql);
row = mysql_fetch_array(rs);

echo row['city'] . "|" . row['state'];

mysql_close(cn);
?>

  当客户输入一个POSTCODE后,zipcode.php就接收到它,然后进行从数据表中取出对应的资料,再按一定的格式返回给客户端(此处是以 | 分隔)。最后客户端接收返回的资料,显示在页面上。

if(response.indexOf('|' != -1)) {
update = response.split('|');
document.getElementById("city").value = update[0];
document.getElementById("state").value = update[1];
}


    希望这篇AJAX实例:根据邮编自动完成地址信息的文章能够对您有所帮助,如果您觉得这篇网站维护教程有用的话,别忘了推荐给您的朋友哦!如果您有好的经验方法,不妨拿出来和大家一起分享:假如每个人都拿出一个经验,那么我们都将额外的获取一堆他人的经验。
请记住本站永久域名:(黑客防线网安服务器维护方案维护基地)Www.Rongsen.Com.Cn
    黑客防线网安服务器维护方案本篇连接:http://kj.rongsen.com.cn/show-15875-1.html
网站维护教程更新时间:2012-04-05 00:08:31  【打印此页】  【关闭
0
顶一下
0
踩一下
我要申请本站N点 | 黑客防线官网 |  
专业服务器维护及网站维护手工安全搭建环境,网站安全加固服务。黑客防线网安服务器维护基地招商进行中!QQ:29769479

footer  footer  footer  footer