jQuery开发笔记

场景一：用$.each(obj, function(i, val){...})遍历并执行对象的所以方法

code:

var validator = {
f1:function(){console.log('f1 executed');},
f2:function(){console.log('f2 executed');}
};

$.each(validator, function(i, f){
//仅执行方法f1
if(i=='f1')f.call(); //或者f(), f()和f.call()等价
});

输出：f1 executed

问题解决：

Bug1：在同一个页面，有两个位置调用调用同一个ajax请求方法，参数是一样的，结果第一个位置调用成功，第二个位置调用失败（后台服务是一直可用的）。

在第二个位置调用ajax请求是，响应的status=404。两个触发点分别设置了几乎一样的请求参数。

以下是示例代码：

$('#btn1').click(function(){
	var parameters = 
		{'addr.province.code':'BEIJ', 'addr.province.name':'北京', 'addr.city.code':'cc1', 'addr.city.name':'北京'};
	validateAddressInfo(parameters);
});

$('#btn2').click(function(){
	var parameters = 
		{'addr.province.code':'SHAHAI', 'addr.province.name':'上海', 'addr.city':'cc2', 'addr.city.name':'上海'};
	validateAddressInfo(parameters);
});

function validateAddressInfo(parmameters){	
	$.ajax({
		type:'post',
		url:'/ajax/api/validateAddress',
		async:false,
		dataType:'json',
		success:function(data,status){
			//...
		},
		error:function(data){
			//...
			alert(data.status);
		}
	});	
}

点击按钮btn2的时候，ajax请求直接返回404了，请求没有到达后台。

原因：按钮btn2点击事件中的参数addr.city跟设值'cc2'的类型不匹配，因为addr.city对应的是后端的java类City.java, 'cc2'(String)转换失败，导致请求无法到达后台。

Tips : 采用ajax请求时， 如果返回404， 在后台接口可用的情况下，检测请求参数与后端的参数类型是否匹配。

 总结：

1. 在调用同一个ajax请求方法时，如果一个成功，一个失败，优先比较两者的参数的key/value是否一致；

2. 不要在两个及以上的位置编写相同或结构相同/相似的代码，这样可以减少出错的机会。

题外话：这个bug困扰了我2天，被另外一个同事发现了这个问题的原因是请求参数的key错误，因为我一直没有想到请求参数的key会有问题。。。