解決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")