AJAX页面查询实现的注意点

项目一直使用的都是最原始的form提交刷新整个页面的方式，不知道落后潮流几个时代了，而且体验很笨重。

最近，PM提出一个隐藏利润的功能，在勾选一个多选框时，可以给查询结果增加利润一列。这个场景当然也可以用整个页面刷新来实现，但是该页面同时存在6个统计项（如下图），重新统计这些项目无疑会浪费很多查询资源。所以考虑用ajax异步查询来实现。

今日订单：0个 已完成订单：0个 处理中订单：15个 待查看退款订单：0个

今日订单支出：0元今日到账分润：0元

思路如下：

1.将页面的form部分单独拆成一个页面form.vm，首次渲染由服务器完成

2.重写页面的form.submit事件，用ajax方式提交

3.服务器端接收到请求后进行处理，并使用查询结果渲染form.vm，再返回给前端

4.前端获取查询后的结果，用obj.html(res.data)方式刷新查询页面显示结果部分

遇到主要的问题：

1.得到查询部分后，使用obj.html(res.data)渲染后，该部分如果存在js绑定事件或者渲染外观的部分，就需要再次进行处理。在我的业务场景下，下拉列表是使用jqTransform实现的，页面首次加载对其进行了渲染，所以ajax查询返回后仍然需要重新渲染该下拉列表；

解决方案：

对于整站的控件，可以共用同一个js,比如init.js，提供初始化方法，页面查询完后就调用该方法；

对于本页面特殊的控件或者事件，可以放在一个方法里调用，ajax请求完后再次调用，但是鉴于重写form的submit事件也是页面初始化的一部分，所以最终导致了递归的调用。

最终的结果大致如下：

var initPage = function init(){

//ajax查询：
at.ajaxQuery($('#searchForm'),$('#formContainer'),function(){
site.init();
initPage();
});
//其他初始化页面动作
}

2.特别需要注意，在覆写form.submit事件时需要return false;否则就会继续执行

ajaxQuery : function(form, refreshPart, reRender) {
if (form.length > 0) {
form.submit(function() {
form.ajaxSubmit({
dataType : 'json',
type : 'GET',
success : function(res) {
if (res.code === '1') {
if (res.data.length > 0) {
refreshPart.html(res.data);
}
reRender();
}else{
$.showError("查询数据出错，请刷新页面重试");
}
},
beforeSubmit : function() {
refreshPart
.html("
数据加载中...
");
},
error : function(xhr, e, msg) {
$.showError("查询数据出错，请刷新页面重试");
}
});

return false;
});
}
}

3.Javascript中的this

以下代码require一个js模块：

var at = require("../../comp/ajaxTool.js");
var ajaxQuick=at.ajaxQuick;
function afterDomLoaded() {
at.ajaxQuick("/myLife/fetchYesterdayBalance.htm", $('#yesterdayBalance'));
at.ajaxQuick("/myLife/fetchTotalIncomeOfToday.htm", $('#todayIncome'));
at.ajaxQuick("/myLife/fetchTotalOutcomeOfToday.htm", $('#todayOutcome'));
at.ajaxQuick("/shopOrder/getDealingOrderCount.htm",
$('#dealingOrderCount'));
//...
}

ajaxTool.js代码中的写法如下：

var ajaxTool = {
/**
 * 查询某个URL将内容替换指定元素内容
 */
ajaxQuick : function(reqestUrl, placeHolderObj, params) {
this.ajaxGet(reqestUrl, function(res) {
if (res.code === '1') {
placeHolderObj.text(res.data);
}
}, function(xhr) {
placeHolderObj.text('--');
}, params);
},

/**
 * 封装ajax方式GET某个URL的数据
 */
ajaxGet : function(reqestUrl, successCallback, beforeSendCallback,
params) {
$.ajax({
url : reqestUrl,
type : 'get',
dataType : 'json',
data : params || {
t : new Date().getTime()
},
success : successCallback,
beforeSend : beforeSendCallback,
error : function(xreq, err, e) {
Y.alert(err);
}
});
}
//....
}

老是报ajaxGet函数没有定义，但是ajaxTool的写法看起来也没有问题。求教高人，发现问题出在，js中this关键字。在ajaxTool.js内部this是指向ajaxTool这个对象的，但当执行了var ajaxQuick=at.ajaxQuick; 这句以后，ajaxQuick这个方法的执行上下文已经变成了window，而在window上是没有ajaxGet的，经典坑啊！

关于最后一个问题附送一篇文章：

我希望自己尽早知道的7个Javascript怪癖