AJAX页面查询实现的注意点

最新推荐文章于 2023-01-23 18:14:47 发布

LucasBelieve

最新推荐文章于 2023-01-23 18:14:47 发布

阅读量917

点赞数

分类专栏：总结

本文链接：https://blog.csdn.net/lucasbelieve/article/details/36438257

版权

总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

项目一直使用的都是最原始的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("<div  style='margin-left:50%;margin-top:20%'><img src='/images/common/wait.gif' /><span style='padding-left:10px'>数据加载中...</span></div>");
										},
										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怪癖