解決ajax在chrome中正常,在IE中不正常的問題
在做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 onclick="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")