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

解决ajax在chrome中正常，在IE中不正常的问题

猜你喜欢