在做web开发是,大多时候都会使用FireFox作为调试的浏览器。上面携带的FireBug用来调试JavaScript实在是太方便了,绝大多数的问题都能够通过它跟踪调试出来。但是,当项目发布时,不能仅在这一款浏览器是运行正常就算正常了。还要做浏览器的兼容性测试。说到IE,相信很多人都会很头疼。这段时间就碰到了问题,使用Ajax去后台请求数据,在前台更新显示。开发阶段,在FireFox上一切正常。但到了测试阶段,在IE上,这个小小的功能却怎么也没法正常运行。好在,之前有所耳闻IE的这个“亮点”,于是顺着这个路子去修改代码,果然又恢复正常了。
首先说明一下IE的这个“亮点”,IE有个缓存机制,对请求的url进行判断,发现短时间内请求的url相同,则使用缓存的数据,而不是去重新向服务器获取一次数据。数据缓存也有好处,但对于需要经常去后台获取数据更新的需求来说,这就是个麻烦了。那怎么解决这个问题呢?既然是对相同的url认为是重复请求,那我就想办法每次请求的url值都不相同,同时还保证是我要的数据。我们采用在url中增加一个无用的参数,且这个参数每次都在变(时间!)。
这里举个简单的例子,从后台获取实时时间。普通的做法如下,此时在chrome、FireFox上不停的向后台请求获取实时数据,会发现页面上的时间会不停的改变。但换到IE浏览器下,第一次点击时间会出现,当不断重复点击时,时间仍旧停留在第一次获取到的时间上。
一,以下是前端HTML代码,通过AJAX自动刷新购物车列表
table class="table table-striped table-bordered"> <thead> <tr> <th>编号</th> <th>文具名称</th> <th>规格</th> <th>操作</th> </tr> </thead> <tbody> {% for stationery in stationerys %} <tr nid="{{ stationery.id }}"> <td>{{ forloop.counter }}</td> <td>{{ stationery.name }}</a></td> <td>{{ stationery.spec }}</td> <td> <a οnclick="testajax(this);" href="#" >放入购物车</a> </td> </tr> {% endfor %} </tbody> </table>
<div class="col-sm-4"> <h4 >购物车<span class="glyphicon glyphicon-shopping-cart"></span> 订单号:{{ request.session.orderid }} </h4> <table class="table table-striped table-bordered" id="t2"> <thead> <tr> <th>序号</th> <th>文具名称</th> <th>数量</th> </tr> </thead> <tbody > {% for cart in carts %} <tr> <td>{{ forloop.counter }}</td> <td>{{ cart.stationery }}</a></td> <td>{{ cart.num }}</td> </tr> {% endfor %} </tbody> </table> <div align="left" > <ul> <a href="clean_cart" > <span class="glyphicon glyphicon-question-sign"></span> 清空</a> -- <a href="submit_cart"> <span class="glyphicon glyphicon-question-sign"></span> 提交</a> </ul> </div> </div> </div>
二,以下是ajax,实现向后台更新购物车的列表,并取出购物车列表,刷新前端页面的购物车
function testajax(ths){ var id=$(ths).parent().parent().attr('nid'); var orderid="{{ request.session.orderid }}"; //给传递的data加一个时间变量,时间由下面的var times获得,以解决在IE中工作不正常的问题 var times=new Date().getTime(); $.ajax({ type: 'GET', url: 'ajax', dataType: 'json', data:{id:id,orderid:orderid,times:times}, success: function(ret){ //查询成功之后填充表格 var html = ""; var tdHead = "<td height='20'><div align='center'><span class='STYLE1'>"; var tdFoot = "</span></div></td>"; $("#t2 tr:gt(0)").remove(); //第一行是table的表格头不需清除。 for(var i=0;i<ret.length;i++){ var countInfo = ret[i]; var totalCount = countInfo.stationery__name; var sucCount = countInfo.order_num; html += "<tr>" + tdHead + (i + 1) + tdFoot + tdHead + totalCount + tdFoot + tdHead + sucCount + tdFoot + "</tr>"; } $("#t2").append(html); //将新数据填充到table } }); }
三, 以下是后端的函数处理ajax请求,把前端传递过来的新商品添加到购发物车,把新的购物车列表返回给ajax, 刷新前端页面
def ajax(request): id=request.GET.get('id') orderid=request.GET.get('orderid') #user_list_id=request.session.get('user_list_id',None) #msg='sucessfully' #print(id) #print(msg) #print("get the stationery id is '%s'"%(id)) #print("get order is is '%s'"%(orderid)) #search if there is any same stationery_id on the shopping orderid res=order_record_slave.objects.filter(order_record_master_id=orderid, stationery_id=id ) if res.exists(): #print("find same stationery '%s'" % (id)) for stat in res: id = stat.id #print("stat id is '%s'"%(id)) obj=order_record_slave.objects.get(id=id) obj.order_num=obj.order_num+1 obj.save() stats = order_record_slave.objects.filter(order_record_master_id=orderid).values('stationery__name', 'order_num') ret = list(stats) result = json.dumps(ret) return HttpResponse(result, "application/json") else: #print("not found any same stationery") order_record_slave.objects.create(order_num=1, order_record_master_id=orderid, stationery_id=id) #stats=serializers.serialize('json',order_record_master.objects.filter(id=orderid)) stats= order_record_slave.objects.filter(order_record_master_id=orderid).values('stationery__name', 'order_num') ret = list(stats) result = json.dumps(ret) return HttpResponse(result, "text/json;charset=utf-8")