1. 程式人生 > >解決ajax在chrome中正常,在IE中不正常的問題

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