jQuery实现邮政编码联动地址_编程设计

// 用的ajax加载，ajax没做兼容封装，所以不兼容ie6，联动后会有颜色动画 
 
 // code: 
 
<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <script src="ADS.js"></script> 
    <script src="myLogger.js"></script> 
    <title></title> 
</head> 
<body> 
<select name="postalCode" id="postalCode"> 
    <option value="518049">518049</option> 
    <option value="510000">510000</option> 
    <option value="0">0</option> 
</select> 
<br> 
<input id="street" type="text"> 
<input id="city" type="text"> 
<input id="province" type="text"> 
<script> 
    function isPostalCode(s) { 
        return (s.length === 6); 
    } 
 
    function FadeColor(from, to, callback, duration, framesPerSec) { 
 
        this.from = from; 
        this.to = to; 
        this.callback = callback; 
 
        // 以秒表示的渐变效果持续时间 
        this.duration = duration || 1; 
        // 在给定持续时间内动画的帧数 
        this.framesPerSec = framesPerSec || this.duration * 15; 
 
    } 
 
    // setTimeout()的包装函数 
    // 用于基于帧数计算延迟时间 
    FadeColor.prototype.doTimeout = function (color, frame) { 
        var that = this; 
        setTimeout(function () { 
            try { 
                that.callback(color); 
            } catch (e) { 
                // 对异常进行调试 
                ADS.log.write(e); 
            } 
        }, (that.duration * 1000 / that.framesPerSec) * frame); 
    }; 
 
    FadeColor.prototype.init = function () { 
        var r, g, b; 
        var frame = 1; 
 
        // 在第0帧设置渐变的开始颜色 
        this.doTimeout('rgb(' + this.from.r + ',' + this.from.g + ',' + this.from.b + ')', 0); 
 
        // 计算两帧之间RGB值的改变量 
        while (frame < this.framesPerSec + 1) { 
            // 不断接近目标的值 
            r = Math.ceil(this.from.r * ((this.framesPerSec - frame) / this.framesPerSec) 
                    + this.to.r * (frame / this.framesPerSec)); 
            g = Math.ceil(this.from.g * ((this.framesPerSec - frame) / this.framesPerSec) 
                    + this.to.g * (frame / this.framesPerSec)); 
            b = Math.ceil(this.from.b * ((this.framesPerSec - frame) / this.framesPerSec) 
                    + this.to.b * (frame / this.framesPerSec)); 
 
            // 为这一阵调用延时函数 
            this.doTimeout('rgb(' + r + ',' + g + ',' + b + ')', frame); 
 
            frame++; 
 
        } 
    }; 
 
    ADS.addEvent(window, 'load', function () { 
        var postalCode = ADS.$('postalCode'); 
        var a = function (s) { 
            var a1 = new FadeColor({ 
                // 起始颜色 
                r: 0, 
                g: 255, 
                b: 0 
            }, { 
                // 结束颜色 
                r: 255, 
                g: 255, 
                b: 255 
            }, function (color) { 
                // 将颜色应用到元素中 
                ADS.setStyle(s, { 
                    'background-color': color 
                }); 
            }); 
            return a1.init(); 
        }; 
 
        ADS.addEvent(postalCode, 'change', function () { 
            var newPostalCode = this.value; 
            if (!isPostalCode(newPostalCode)) { 
                return; 
            } 
 
            var req = new XMLHttpRequest(); 
            req.open('POST', 'serve.js?postalCode=' + newPostalCode, true); 
            req.onreadystatechange = function () { 
                if (req.readyState === 4) { 
                    if (req.status >= 200 && req.status < 300 || req.status === 304) { 
                        eval(req.responseText); 
                        if (ADS.$('street').value !== street) { 
                            ADS.$('street').value = street; 
                            a('street'); 
                        } 
                        if (ADS.$('city').value !== city) { 
                            ADS.$('city').value = city; 
                            a('city'); 
                        } 
                        if (ADS.$('province').value !== province) { 
                            ADS.$('province').value = province; 
                            a('province'); 
                        } 
                    } 
 
                } 
            }; 
            req.send(); 
        }); 
    }); 
</script> 
</body> 
</html>  
 
 
 // serve.js: 
 
var street,city,province; 
if(newPostalCode == '518049'){ 
	street = '123 Somewhere'; 
	city = 'Ottawa'; 
	province = 'Ontario'; 
} else { 
	street = 'asdasd'; 
	city = 'asdasd'; 
	province = 'Oasdasd'; 
}
本文参考链接：https://www.cnblogs.com/webFrontDev/archive/2012/12/16/2820389.html