分类 web 下的文章

require.js中对jquery使用empty:选项或者CDN的时候shim不起作用的原因

最近在尝试使用require.js进行js的模块化开发,但是昨天遇到一个奇怪的问题。在使用r.js打包的时候,如果我使用了jquery插件而却把jquery.js放在单独的cdn上,也就是在build.js中jquery.js的路径是empty:的时候,require.js就不会引入它,导致插件运行错误。只有jquery.js在本地的时候才能被成功打包,但是这样的话,jquery.js也被合并到一个文件里面去了,没办法利用之前的缓存了。

- 阅读剩余部分 -

http 的 Cache-Control

最近写的一个应用,进入购物车然后填写地址,提交、支付,最后跳转到订单详情页面。这个流程看起来貌似没问题,但是最近测试的时候发现,进入订单详情页面之后,一步步的返回,竟然还能到了那个填写地址的页面,填写地址页面上的商品数量金额等竟然还是原先的值,我明明都把购物车清空了。。。

使用 Chrome 开发者工具查看网页的请求,发现这个页面的 html 加载,几个 ajax 加载都是显示from cache

QQ20150131-1@2x.png

也就是从浏览器缓存里面取出来的页面,而且看了看 http 头,没有什么Cache-Control的字段。这样的话,就禁用浏览器对这个页面的缓存吧。
我后端使用的是 Django 框架,我记得以前看源码的时候有个never_cache的修饰符。加上试试。

很奇怪,加上了之后虽然多了一个Cache-Control: max-age=0,但是还是显示from cache

QQ20150131-3@2x.png

https://stackoverflow.com/questions/2095520/fighting-client-side-caching-in-django/13512008#13512008,经过提示,不能仅仅使用max-age=0,还要结合其他的几个一起使用。

参考其中一个人的代码,

from django.views.decorators.cache import patch_cache_control
from functools import wraps

def never_ever_cache(decorated_function):
    """Like Django @never_cache but sets more valid cache disabling headers.

    @never_cache only sets Cache-Control:max-age=0 which is not
    enough. For example, with max-axe=0 Firefox returns cached results
    of GET calls when it is restarted.
    """
    @wraps(decorated_function)
    def wrapper(*args, **kwargs):
        response = decorated_function(*args, **kwargs)
        patch_cache_control(
            response, no_cache=True, no_store=True, must_revalidate=True,
            max_age=0)
        return response
    return wrapper
class SomeView(View):
    @method_decorator(never_ever_cache)
    def get(self, request):
        return HttpResponse('Hello')

这样的话,响应头就变成了Cache-Control:no-cache, no-store, must-revalidate, max-age=0。经过测试,后退到这个页面的时候确实向服务器发送了请求重新加载了。

参考 http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9

jquery ajax发送数组的一个问题

最近也在尝试的写一点前端,但是遇到这样一个奇怪的问题。就是jquery ajax方法没办法发送数组。原来的代码在这里

$.ajax({
      data: [1, 2, 3],
      method: "post",
      url: "/"
    })

查看网络请求,

b1.png

发现Content-Type:application/x-www-form-urlencoded而且FormData是三个undefined,真是奇怪。而之前传递字典类型的数据的时候都没有问题,比如

b2.png

而我期望的数据是json类型的,是这样的

b3.png

查看jquery的文档

data
Type: Plain Object or String or Array
Data to be sent to the server. It is converted to a query string, if not already a string.
It's appended to the url for GET-requests. See processData option to
prevent this automatic processing. Object must be Key/Value pairs. If
value is an Array, jQuery serializes multiple values with same key
based on the value of the traditional setting (described below).

这里说如果传递的数据是一个数组,那么jquery就会自动的进行序列化,会调用jQuery.param( obj ),但是这个函数如果传递的是数组,能接受的对象类型必须是.serializeArray()序列化过的那种数据格式。文档里这样说的

If the object passed is in an Array, it must be an array of objects in the format returned by .serializeArray()

然后数据格式是这样的

[
  { name: "first", value: "Rick" },
  { name: "last", value: "Astley" },
  { name: "job", value: "Rock Star" }
]

然后我们的数据显然不是,造成解析错误。
如果将数组形式改为上面的,直接写在ajax里面,确实能成功的解析和发送。

这个时候怎么去实现这个需求呢,首先想到的就是手动的去编码成json,

B4.png

但是因为后台看到Content-Type:application/x-www-form-urlencoded的时候,会按照key-value的形式去解析数据,所以这样的话,后台只能获取到这个key,没有value。这样的话,只能手动的去制定contentType了,让后台主动的去按照json解析。

所以代码修改为这样就好了

$.ajax({
      data: JSON.stringfy([1, 2, 3]),
      method: "post",
      url: "/",
      contentType: "application/json"
    })

参考:
http://api.jquery.com/jquery.ajax/
http://api.jquery.com/jQuery.param/
http://api.jquery.com/serializeArray/