Python 之 Django框架（ Cookie和Session、Django中间件、AJAX、Django序列化）

12.4 Cookie和Session

12.41 cookie

Cookie具体指的是一段小信息，它是服务器发送出来存储在浏览器上的一组组键值对，下次访问服务器时浏览器会自动携带这些键值对，以便服务器提取有用信息

获取Cookie：

<a href="https://www.gaodaima.com/tag/request" title="查看更多关于request的文章" target="_blank">request</a>.COOKIES[<span style="color: #800000">"</span><span style="color: #800000"><a href="https://www.gaodaima.com/tag/login" title="查看更多关于login的文章" target="_blank">login</a></span><span style="color: #800000">"</span>]                           <span style="color: #008000">#</span><span style="color: #008000">找不到时报错</span>
login_flag = request.COOKIES.get(<span style="color: #800000">"</span><span style="color: #800000">login</span><span style="color: #800000">"</span>,<span style="color: #800000">""</span>)        <span style="color: #008000">#</span><span style="color: #008000">找不到时返回None</span>
request.get_signed_<a href="https://www.gaodaima.com/tag/cookie" title="查看更多关于cookie的文章" target="_blank">cookie</a>(key, default=RAISE_ERROR, salt=<span style="color: #800000">""</span>, max_age=<span style="color: #000000">None)
login_flag </span>= request.get_signed_cookie(<span style="color: #800000">"</span><span style="color: #800000">login</span><span style="color: #800000">"</span>,default=<span style="color: #800000">""</span>,salt=<span style="color: #800000">"</span><span style="color: #800000">shanghais1hao</span><span style="color: #800000">"</span>)<span style="color: #008000">#</span><span style="color: #008000">找不到时返回默认值空</span>

www#gaodaima.com来源[email protected]搞@^&代*@码)网搞代码

设置Cookie：给HttpResponse、render、redirect实例化的对象设置cookie

rep = HttpResponse(<span style="color: #800000">"</span><span style="color: #800000">xxxx</span><span style="color: #800000">"</span><span style="color: #000000">)
rep </span>= render(request, <span style="color: #800000">"</span><span style="color: #800000">book_list.html</span><span style="color: #800000">"</span><span style="color: #000000">)
rep </span>= redirect(<span style="color: #800000">"</span><span style="color: #800000">/book_list/</span><span style="color: #800000">"</span><span style="color: #000000">)

rep.set_cookie(key,value,...)
rep.set_signed_cookie(key,value,salt</span>=<span style="color: #800000">"</span><span style="color: #800000">加密盐</span><span style="color: #800000">"</span>, max_age=<span style="color: #000000">None, ...)
rep.set_signed_cookie(</span><span style="color: #800000">"</span><span style="color: #800000">login</span><span style="color: #800000">"</span>, <span style="color: #800000">"</span><span style="color: #800000">ok</span><span style="color: #800000">"</span>, salt=<span style="color: #800000">"</span><span style="color: #800000">shanghais1hao</span><span style="color: #800000">"</span>, max_age=None)

删除Cookie:给HttpResponse、render、redirect实例化的对象删除cookie

<span style="color: #0000ff">def</span><span style="color: #000000"> logout(request):
    rep </span>= redirect(<span style="color: #800000">"</span><span style="color: #800000">/login/</span><span style="color: #800000">"</span><span style="color: #000000">)
    rep.delete_cookie(</span><span style="color: #800000">"</span><span style="color: #800000">login</span><span style="color: #800000">"</span>)      <span style="color: #008000">#</span><span style="color: #008000"> 删除用户浏览器上之前设置的cookie值</span>
    <span style="color: #0000ff">return</span> rep

12.42 Session

Cookie弥补了HTTP无状态的不足，让服务器知道来的人是“谁”；但是Cookie以文本的形式保存在本地，自身安全性较差；所以通过Cookie识别不同的用户，对应的在Session里保存私密的信息以及超过4096字节的文本

获取Session：

request.session[<span style="color: #800000">"</span><span style="color: #800000">k1</span><span style="color: #800000">"</span><span style="color: #000000">]
request.session.get(</span><span style="color: #800000">"</span><span style="color: #800000">k1</span><span style="color: #800000">"</span><span style="color: #000000">,None)
login_flag </span>= request.session.get(<span style="color: #800000">"</span><span style="color: #800000">login</span><span style="color: #800000">"</span>)

设置Session：

request.session[<span style="color: #800000">"</span><span style="color: #800000">k1</span><span style="color: #800000">"</span>] = 123<span style="color: #000000">
request.session.setdefault(</span><span style="color: #800000">"</span><span style="color: #800000">k1</span><span style="color: #800000">"</span>,123) <span style="color: #008000">#</span><span style="color: #008000"> 存在则不设置,不存在则设置</span>
request.session[<span style="color: #800000">"</span><span style="color: #800000">login</span><span style="color: #800000">"</span>] = <span style="color: #800000">"</span><span style="color: #800000">OK</span><span style="color: #800000">"</span><span style="color: #000000">
request.session[</span><span style="color: #800000">"</span><span style="color: #800000">user</span><span style="color: #800000">"</span>] = username

删除Session：

<span style="color: #0000ff">def</span><span style="color: #000000"> logout(request):
    request.session.flush() 
    </span><span style="color: #008000">#</span><span style="color: #008000">删除当前的会话session数据并删除会话的Cookie，这用于确保前面的会话数据不可以再次被用户的浏览器访问</span>
    request.session.delete()        <span style="color: #008000">#</span><span style="color: #008000"> 删除当前会话的所有Session数据</span>
    <span style="color: #0000ff">return</span> redirect(<span style="color: #800000">"</span><span style="color: #800000">/login/</span><span style="color: #800000">"</span><span style="color: #000000">)

</span><span style="color: #0000ff">del</span> request.session[<span style="color: #800000">"</span><span style="color: #800000">login</span><span style="color: #800000">"</span>]

所有键、值、键值对:

request.session.keys()      <span style="color: #008000">#</span><span style="color: #008000">dict_keys(["login", "user", "_session_expiry"])</span>
request.session.values()    <span style="color: #008000">#</span><span style="color: #008000">dict_values(["OK", "alex", 1209600])</span>
request.session.items()     <span style="color: #008000">#</span><span style="color: #008000">dict_items([("login", "OK"), ("user", "alex"), ("_session_expiry", 1209600)])</span>
<span style="color: #000000">request.session.iterkeys()
request.session.itervalues()
request.session.iteritems()</span>

其他session的属性和方法：

<span style="color: #008000">#</span><span style="color: #008000"> 会话session的key</span>
request.session.session_key                 <span style="color: #008000">#</span><span style="color: #008000">k69mo6fu6qmvq7hpapdy54erpce1ksy5</span><span style="color: #008000">
#</span><span style="color: #008000"> 将所有Session当前日期大于失效日期的数据删除</span>
<span style="color: #000000">request.session.clear_expired()
</span><span style="color: #008000">#</span><span style="color: #008000"> 检查会话session的key在数据库中是否存在</span>
request.session.exists(<span style="color: #800000">"</span><span style="color: #800000">session_key</span><span style="color: #800000">"</span><span style="color: #000000">)
</span><span style="color: #008000">#</span><span style="color: #008000"> 设置会话Session和Cookie的超时时间</span>
<span style="color: #000000">request.session.set_expiry(value)
    </span>*<span style="color: #000000"> 如果value是个整数，session会在数秒数后失效。
    </span>*<span style="color: #000000"> 如果value是个datatime或timedelta，session就会在这个时间后失效。
    </span>*<span style="color: #000000"> 如果value是0,用户关闭浏览器session就会失效。
    </span>*<span style="color: #000000"> 如果value是None,session会依赖全局session失效策略。
request.session.set_expiry(</span>60 * 60 * 24 * 14)

12.421 Django中的Session配置(settings.py)

1<span style="color: #000000">. 数据库Session
SESSION_ENGINE </span>= <span style="color: #800000">"</span><span style="color: #800000">django.contrib.sessions.backends.db</span><span style="color: #800000">"</span>   <span style="color: #008000">#</span><span style="color: #008000"> 引擎（默认）</span>
<span style="color: #000000">
</span>2<span style="color: #000000">. 缓存Session
SESSION_ENGINE </span>= <span style="color: #800000">"</span><span style="color: #800000">django.contrib.sessions.backends.cache</span><span style="color: #800000">"</span>  <span style="color: #008000">#</span><span style="color: #008000"> 引擎</span>
SESSION_CACHE_ALIAS = <span style="color: #800000">"</span><span style="color: #800000">default</span><span style="color: #800000">"</span>                            <span style="color: #008000">#</span><span style="color: #008000"> 使用的缓存别名（默认内存缓存，也可以是memcache），此处别名依赖缓存的设置</span>
<span style="color: #000000">
</span>3<span style="color: #000000">. 文件Session
SESSION_ENGINE </span>= <span style="color: #800000">"</span><span style="color: #800000">django.contrib.sessions.backends.file</span><span style="color: #800000">"</span>    <span style="color: #008000">#</span><span style="color: #008000"> 引擎</span>
SESSION_FILE_PATH = None                                    <span style="color: #008000">#</span><span style="color: #008000"> 缓存文件路径，如果为None，则使用tempfile模块获取一个临时地址tempfile.gettempdir() </span>
<span style="color: #000000">
</span>4. 缓存+<span style="color: #000000">数据库
SESSION_ENGINE </span>= <span style="color: #800000">"</span><span style="color: #800000">django.contrib.sessions.backends.cached_db</span><span style="color: #800000">"</span>        <span style="color: #008000">#</span><span style="color: #008000"> 引擎</span>
<span style="color: #000000">
</span>5<span style="color: #000000">. 加密Cookie Session
SESSION_ENGINE </span>= <span style="color: #800000">"</span><span style="color: #800000">django.contrib.sessions.backends.signed_cookies</span><span style="color: #800000">"</span>   <span style="color: #008000">#</span><span style="color: #008000"> 引擎</span>
<span style="color: #000000">
其他公用设置项：
SESSION_COOKIE_NAME ＝ </span><span style="color: #800000">"</span><span style="color: #800000">sessionid</span><span style="color: #800000">"</span>                       <span style="color: #008000">#</span><span style="color: #008000"> Session的cookie保存在浏览器上时的key，即：sessionid＝随机字符串（默认）</span>
SESSION_COOKIE_PATH ＝ <span style="color: #800000">"</span><span style="color: #800000">/</span><span style="color: #800000">"</span>                               <span style="color: #008000">#</span><span style="color: #008000"> Session的cookie保存的路径（默认）</span>
SESSION_COOKIE_DOMAIN = None                             <span style="color: #008000">#</span><span style="color: #008000"> Session的cookie保存的域名（默认）</span>
SESSION_COOKIE_SECURE = False                            <span style="color: #008000">#</span><span style="color: #008000"> 是否Https传输cookie（默认）</span>
SESSION_COOKIE_HTTPONLY = True                           <span style="color: #008000">#</span><span style="color: #008000"> 是否Session的cookie只支持http传输（默认）</span>
SESSION_COOKIE_AGE = 1209600                             <span style="color: #008000">#</span><span style="color: #008000"> Session的cookie失效日期（2周）（默认）</span>
SESSION_EXPIRE_AT_BROWSER_CLOSE = False                  <span style="color: #008000">#</span><span style="color: #008000"> 是否关闭浏览器使得Session过期（默认）</span>
SESSION_SAVE_EVERY_REQUEST = False                       <span style="color: #008000">#</span><span style="color: #008000"> 是否每次请求都保存Session，默认修改之后才保存（默认）</span>

12.5 Django中间件

中间件：在视图函数执行之前和执行之后都可以做一些额外的操作，它本质上就是一个自定义类，类中定义了几个方法，Django框架会在请求的特定的时间去执行这些方法。

<span style="color: #000000">process_request(self,request)
process_view(self, request, view_func, view_args, view_kwargs)
process_template_response(self,request,response)
process_exception(self, request, exception)
process_response(self, request, response)</span>

以上方法的返回值可以是None或一个HttpResponse对象，如果是None，则继续按照django定义的规则向后继续执行，如果是HttpResponse对象，则直接将该对象返回给用户

自定义一个中间件示例:

<span style="color: #0000ff">from</span> django.utils.deprecation <span style="color: #0000ff">import</span><span style="color: #000000"> MiddlewareMixin

</span><span style="color: #0000ff">class</span><span style="color: #000000"> MD1(MiddlewareMixin):
    </span><span style="color: #0000ff">def</span><span style="color: #000000"> process_request(self, request):
        </span><span style="color: #0000ff">print</span>(<span style="color: #800000">"</span><span style="color: #800000">MD1里面的 process_request</span><span style="color: #800000">"</span><span style="color: #000000">)
    </span><span style="color: #0000ff">def</span><span style="color: #000000"> process_response(self, request, response):
        </span><span style="color: #0000ff">print</span>(<span style="color: #800000">"</span><span style="color: #800000">MD1里面的 process_response</span><span style="color: #800000">"</span><span style="color: #000000">)
        </span><span style="color: #0000ff">return</span> response

12.51 中间件版登录验证

中间件版的登录验证需要依靠session，所以数据库中要有django_session表

middlewares.py：

<span style="color: #0000ff">class</span><span style="color: #000000"> AuthMD(MiddlewareMixin):
    white_list </span>= [<span style="color: #800000">"</span><span style="color: #800000">/login/</span><span style="color: #800000">"</span>, ]  <span style="color: #008000">#</span><span style="color: #008000"> 白名单</span>
    balck_list = [<span style="color: #800000">"</span><span style="color: #800000">/black/</span><span style="color: #800000">"</span>, ]  <span style="color: #008000">#</span><span style="color: #008000"> 黑名单</span>
<span style="color: #000000">
    </span><span style="color: #0000ff">def</span><span style="color: #000000"> process_request(self, request):
        </span><span style="color: #0000ff">from</span> django.shortcuts <span style="color: #0000ff">import</span><span style="color: #000000"> redirect, HttpResponse

        next_url </span>=<span style="color: #000000"> request.path_info
        </span><span style="color: #008000">#</span><span style="color: #008000">print(request.path_info, request.get_full_path())</span>
        <span style="color: #0000ff">if</span> next_url <span style="color: #0000ff">in</span> self.white_list <span style="color: #0000ff">or</span> request.session.get(<span style="color: #800000">"</span><span style="color: #800000">user</span><span style="color: #800000">"</span><span style="color: #000000">):
            </span><span style="color: #0000ff">return</span>
        <span style="color: #0000ff">elif</span> next_url <span style="color: #0000ff">in</span><span style="color: #000000"> self.balck_list:
            </span><span style="color: #0000ff">return</span> HttpResponse(<span style="color: #800000">"</span><span style="color: #800000">This is an illegal URL</span><span style="color: #800000">"</span><span style="color: #000000">)
        </span><span style="color: #0000ff">else</span><span style="color: #000000">:
            </span><span style="color: #0000ff">return</span> redirect(<span style="color: #800000">"</span><span style="color: #800000">/login/?next={}</span><span style="color: #800000">"</span>.format(next_url))

在settings.py中注册:

MIDDLEWARE =<span style="color: #000000"> [
    </span><span style="color: #800000">"</span><span style="color: #800000">django.middleware.security.SecurityMiddleware</span><span style="color: #800000">"</span><span style="color: #000000">,
    </span><span style="color: #800000">"</span><span style="color: #800000">django.contrib.sessions.middleware.SessionMiddleware</span><span style="color: #800000">"</span><span style="color: #000000">,
    </span><span style="color: #800000">"</span><span style="color: #800000">django.middleware.common.CommonMiddleware</span><span style="color: #800000">"</span><span style="color: #000000">,
    </span><span style="color: #800000">"</span><span style="color: #800000">django.middleware.csrf.CsrfViewMiddleware</span><span style="color: #800000">"</span><span style="color: #000000">,
    </span><span style="color: #800000">"</span><span style="color: #800000">django.contrib.auth.middleware.AuthenticationMiddleware</span><span style="color: #800000">"</span><span style="color: #000000">,
    </span><span style="color: #800000">"</span><span style="color: #800000">django.contrib.messages.middleware.MessageMiddleware</span><span style="color: #800000">"</span><span style="color: #000000">,
    </span><span style="color: #800000">"</span><span style="color: #800000">middlewares.AuthMD</span><span style="color: #800000">"</span><span style="color: #000000">,
]</span>

urls.py:

<span style="color: #0000ff">from</span> django.conf.urls <span style="color: #0000ff">import</span><span style="color: #000000"> url
</span><span style="color: #0000ff">from</span> app01 <span style="color: #0000ff">import</span><span style="color: #000000"> views

urlpatterns </span>=<span style="color: #000000"> [
    url(r</span><span style="color: #800000">"</span><span style="color: #800000">^index/$</span><span style="color: #800000">"</span><span style="color: #000000">, views.index),
    url(r</span><span style="color: #800000">"</span><span style="color: #800000">^login/$</span><span style="color: #800000">"</span>, views.login, name=<span style="color: #800000">"</span><span style="color: #800000">login</span><span style="color: #800000">"</span><span style="color: #000000">),
]</span>

views.py:

<span style="color: #0000ff">from</span> django.shortcuts <span style="color: #0000ff">import</span><span style="color: #000000"> render, HttpResponse, redirect
</span><span style="color: #0000ff">def</span><span style="color: #000000"> index(request):
    </span><span style="color: #0000ff">return</span> HttpResponse(<span style="color: #800000">"</span><span style="color: #800000">this is index</span><span style="color: #800000">"</span><span style="color: #000000">)

</span><span style="color: #0000ff">def</span><span style="color: #000000"> home(request):
    </span><span style="color: #0000ff">return</span> HttpResponse(<span style="color: #800000">"</span><span style="color: #800000">this is home</span><span style="color: #800000">"</span><span style="color: #000000">)

</span><span style="color: #0000ff">def</span><span style="color: #000000"> login(request):
    </span><span style="color: #0000ff">if</span> request.method == <span style="color: #800000">"</span><span style="color: #800000">POST</span><span style="color: #800000">"</span><span style="color: #000000">:
        user </span>= request.POST.get(<span style="color: #800000">"</span><span style="color: #800000">user</span><span style="color: #800000">"</span><span style="color: #000000">)
        pwd </span>= request.POST.get(<span style="color: #800000">"</span><span style="color: #800000">pwd</span><span style="color: #800000">"</span><span style="color: #000000">)

        </span><span style="color: #0000ff">if</span> user == <span style="color: #800000">"</span><span style="color: #800000">Q1mi</span><span style="color: #800000">"</span> <span style="color: #0000ff">and</span> pwd == <span style="color: #800000">"</span><span style="color: #800000">123456</span><span style="color: #800000">"</span><span style="color: #000000">:           
            request.session[</span><span style="color: #800000">"</span><span style="color: #800000">user</span><span style="color: #800000">"</span>] = user<span style="color: #008000">#</span><span style="color: #008000"> 设置session           </span>
            next_url = request.GET.get(<span style="color: #800000">"</span><span style="color: #800000">next</span><span style="color: #800000">"</span>) <span style="color: #008000">#</span><span style="color: #008000"> 获取跳到登陆页面之前的URL         </span>
            <span style="color: #0000ff">if</span><span style="color: #000000"> next_url:
                </span><span style="color: #0000ff">return</span> redirect(next_url)<span style="color: #008000">#</span><span style="color: #008000"> 如果有，就跳转回登陆之前的URL         </span>
            <span style="color: #0000ff">else</span><span style="color: #000000">:
                </span><span style="color: #0000ff">return</span> redirect(<span style="color: #800000">"</span><span style="color: #800000">/index/</span><span style="color: #800000">"</span>) <span style="color: #008000">#</span><span style="color: #008000"> 否则默认跳转到index页面</span>
    <span style="color: #0000ff">return</span> render(request, <span style="color: #800000">"</span><span style="color: #800000">login.html</span><span style="color: #800000">"</span>)

<span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">html </span><span style="color: #ff0000">lang</span><span style="color: #0000ff">="en"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">charset</span><span style="color: #0000ff">="UTF-8"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">http-equiv</span><span style="color: #0000ff">="x-ua-compatible"</span><span style="color: #ff0000"> content</span><span style="color: #0000ff">="IE=edge"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">name</span><span style="color: #0000ff">="viewport"</span><span style="color: #ff0000"> content</span><span style="color: #0000ff">="width=device-width, initial-scale=1"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>登录页面<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">form </span><span style="color: #ff0000">action</span><span style="color: #0000ff">="{% url "login" %}"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">label </span><span style="color: #ff0000">for</span><span style="color: #0000ff">="user"</span><span style="color: #0000ff">></span>用户名：<span style="color: #0000ff"></</span><span style="color: #800000">label</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text"</span><span style="color: #ff0000"> name</span><span style="color: #0000ff">="user"</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="user"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">label </span><span style="color: #ff0000">for</span><span style="color: #0000ff">="pwd"</span><span style="color: #0000ff">></span>密 码：<span style="color: #0000ff"></</span><span style="color: #800000">label</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text"</span><span style="color: #ff0000"> name</span><span style="color: #0000ff">="pwd"</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="pwd"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="submit"</span><span style="color: #ff0000"> value</span><span style="color: #0000ff">="登录"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">form</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>

12.6 AJAX

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

AJAX优点：

AJAX使用JavaScript技术向服务器发送异步请求；
AJAX请求无须刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；

页面输入两个整数，通过AJAX传输到后端计算出结果并返回：

urls.py:

urlpatterns =<span style="color: #000000"> [
    ...
    url(r</span><span style="color: #800000">"</span><span style="color: #800000">^ajax_add/</span><span style="color: #800000">"</span><span style="color: #000000">, views.ajax_add),
    url(r</span><span style="color: #800000">"</span><span style="color: #800000">^ajax_demo1/</span><span style="color: #800000">"</span><span style="color: #000000">, views.ajax_demo1),
    ...   
]</span>

views.py:

<span style="color: #0000ff">def</span><span style="color: #000000"> ajax_demo1(request):
    </span><span style="color: #0000ff">return</span> render(request, <span style="color: #800000">"</span><span style="color: #800000">ajax_demo1.html</span><span style="color: #800000">"</span><span style="color: #000000">)

</span><span style="color: #0000ff">def</span><span style="color: #000000"> ajax_add(request):
    i1 </span>= int(request.GET.get(<span style="color: #800000">"</span><span style="color: #800000">i1</span><span style="color: #800000">"</span><span style="color: #000000">))
    i2 </span>= int(request.GET.get(<span style="color: #800000">"</span><span style="color: #800000">i2</span><span style="color: #800000">"</span><span style="color: #000000">))
    ret </span>= i1 +<span style="color: #000000"> i2
    </span><span style="color: #0000ff">return</span> JsonResponse(ret, safe=False)

ajax_demo1.html:

<span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">html </span><span style="color: #ff0000">lang</span><span style="color: #0000ff">="en"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">charset</span><span style="color: #0000ff">="UTF-8"</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">http-equiv</span><span style="color: #0000ff">="x-ua-compatible"</span><span style="color: #ff0000"> content</span><span style="color: #0000ff">="IE=edge"</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">name</span><span style="color: #0000ff">="viewport"</span><span style="color: #ff0000"> content</span><span style="color: #0000ff">="width=device-width, initial-scale=1"</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>AJAX局部刷新实例<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text"</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="i1"</span><span style="color: #0000ff">></span><span style="color: #000000">+
</span><span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text"</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="i2"</span><span style="color: #0000ff">></span><span style="color: #000000">=
</span><span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text"</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="i3"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="button"</span><span style="color: #ff0000"> value</span><span style="color: #0000ff">="AJAX提交"</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="b1"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="/static/jquery-3.2.1.min.js"</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">script</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5;color: #000000">
  $(</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">#b1</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">).on(</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">click</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">, </span><span style="background-color: #f5f5f5;color: #0000ff">function</span><span style="background-color: #f5f5f5;color: #000000"> () {
    $.ajax({
      url:</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">/ajax_add/</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">,                           #往哪里发送请求
      type:</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">GET</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">,                                 #请求的方法
      data:{</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">i1</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">:$(</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">#i1</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">).val(),</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">i2</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">:$(</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">#i2</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">).val()},#发送到后端的请求数据
      success:</span><span style="background-color: #f5f5f5;color: #0000ff">function</span><span style="background-color: #f5f5f5;color: #000000"> (data) {                    #请求被正常响应时自动执行的回调函数
        $(</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">#i3</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">).val(data);
      }
    })
  })
</span><span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>

12.61AJAX请求设置csrf_token

方式一：通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送

<span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">html </span><span style="color: #ff0000">lang</span><span style="color: #0000ff">="en"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">charset</span><span style="color: #0000ff">="UTF-8"</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">http-equiv</span><span style="color: #0000ff">="x-ua-compatible"</span><span style="color: #ff0000"> content</span><span style="color: #0000ff">="IE=edge"</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">name</span><span style="color: #0000ff">="viewport"</span><span style="color: #ff0000"> content</span><span style="color: #0000ff">="width=device-width, initial-scale=1"</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>AJAX局部刷新实例<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span><span style="color: #000000">
{% csrf_token %}
</span><span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text"</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="i1"</span><span style="color: #0000ff">></span><span style="color: #000000">+
</span><span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text"</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="i2"</span><span style="color: #0000ff">></span><span style="color: #000000">=
</span><span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text"</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="i3"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="button"</span><span style="color: #ff0000"> value</span><span style="color: #0000ff">="AJAX提交"</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="b1"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="/static/jquery-3.2.1.min.js"</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">script</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5;color: #000000">
  $(</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">#b1</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">).on(</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">click</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">, </span><span style="background-color: #f5f5f5;color: #0000ff">function</span><span style="background-color: #f5f5f5;color: #000000"> () {
    $.ajax({
      url: </span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">/cookie_ajax/</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">,
      type: </span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">POST</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">,
      data: {</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">i1</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">:$(</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">#i1</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">).val(),</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">i2</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">:$(</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">#i2</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">).val(),</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">csrfmiddlewaretoken</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">: $(</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">[name = "csrfmiddlewaretoken"]</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">).val()  </span><span style="background-color: #f5f5f5;color: #008000">//</span><span style="background-color: #f5f5f5;color: #008000"> 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中</span>
<span style="background-color: #f5f5f5;color: #000000">      },
      success: </span><span style="background-color: #f5f5f5;color: #0000ff">function</span><span style="background-color: #f5f5f5;color: #000000"> (data) {
        console.log(data);
      }
    })
  })      
</span><span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>

方式二：通过获取返回的cookie中的字符串，放置在请求头中发送。注意：需要引入一个jquery.cookie.js插件。

<span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">html </span><span style="color: #ff0000">lang</span><span style="color: #0000ff">="en"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">charset</span><span style="color: #0000ff">="UTF-8"</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">http-equiv</span><span style="color: #0000ff">="x-ua-compatible"</span><span style="color: #ff0000"> content</span><span style="color: #0000ff">="IE=edge"</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">name</span><span style="color: #0000ff">="viewport"</span><span style="color: #ff0000"> content</span><span style="color: #0000ff">="width=device-width, initial-scale=1"</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>AJAX局部刷新实例<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text"</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="i1"</span><span style="color: #0000ff">></span><span style="color: #000000">+
</span><span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text"</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="i2"</span><span style="color: #0000ff">></span><span style="color: #000000">=
</span><span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text"</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="i3"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="button"</span><span style="color: #ff0000"> value</span><span style="color: #0000ff">="AJAX提交"</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="b1"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="/static/jquery-3.2.1.min.js"</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">script</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5;color: #000000">
$(</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">#b1</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">).on(</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">click</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">, </span><span style="background-color: #f5f5f5;color: #0000ff">function</span><span style="background-color: #f5f5f5;color: #000000"> () {
    $.ajax({
      url: </span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">/cookie_ajax/</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">,
      type: </span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">POST</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">,
      headers: {</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">X-CSRFToken</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">: $.cookie(</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">csrftoken</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">)},  # 从Cookie取csrftoken，并设置到请求头中
      data: {</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">i1</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">:$(</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">#i1</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">).val(),</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">i2</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">:$(</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">#i2</span><span style="background-color: #f5f5f5;color: #000000">"</span><span style="background-color: #f5f5f5;color: #000000">).val()},
      success: </span><span style="background-color: #f5f5f5;color: #0000ff">function</span><span style="background-color: #f5f5f5;color: #000000"> (data) {
        console.log(data);
      }
    })
})
</span><span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>

或者自己写一个getCookie方法：

<span style="color: #000000">function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== "") {
        var cookies = document.cookie.split(";");
        for (var i = 0; i </span><span style="color: #0000ff"><</span><span style="color: #800000"> cookies</span><span style="color: #ff0000">.length; i++) {
            var cookie </span><span style="color: #0000ff">= jQuery.trim(cookies[i]);
            </span><span style="color: #ff0000"># Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) </span><span style="color: #0000ff">=== </span><span style="color: #ff0000">(name + "</span><span style="color: #0000ff">=")) </span><span style="color: #ff0000">{
                cookieValue </span><span style="color: #0000ff">= decodeURIComponent(cookie.substring(name.length </span><span style="color: #ff0000">+ 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken </span><span style="color: #0000ff">= getCookie("csrftoken");</span>

12.62 Django序列化

<span style="color: #0000ff">from</span> app01 <span style="color: #0000ff">import</span><span style="color: #000000"> models
</span><span style="color: #0000ff">def</span><span style="color: #000000"> persons(request):
    ret </span>=<span style="color: #000000"> models.Person.objects.all()
    </span><span style="color: #008000">#</span><span style="color: #008000">re=models.Person.objects.all().values_list("data")</span>
    <span style="color: #008000">#</span><span style="color: #008000"> import json</span>
    <span style="color: #008000">#</span><span style="color: #008000"> person_list = []</span>
    <span style="color: #008000">#</span><span style="color: #008000"> for i in ret:</span>
    <span style="color: #008000">#</span><span style="color: #008000"> person_list.append({"name": i.name, "age": i.age})</span>
    <span style="color: #008000">#</span><span style="color: #008000"> s = json.dumps(person_list)</span>
    <span style="color: #0000ff">from</span> django.core <span style="color: #0000ff">import</span><span style="color: #000000"> serializers
    s </span>= serializers.serialize(<span style="color: #800000">"</span><span style="color: #800000">json</span><span style="color: #800000">"</span>, ret) <span style="color: #008000">#</span><span style="color: #008000">序列化对象，取出对象所有属性组成字典并序列化成json字符串</span>
    <span style="color: #008000">#</span><span style="color: #008000">s = serializers.serialize("json", ret) 序列化日期类型</span>
    <span style="color: #0000ff">return</span> HttpResponse(s)

12.63 AJAX上传文件

formData的基本用法：FormData对象，可以把所有表单元素的name与value组成一个queryString，提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可

利用 FormData 来上传文件：

<span style="color: #008000">#</span><span style="color: #008000">上传文件示例</span>
<body>
<div>
    <input accept=<span style="color: #800000">"</span><span style="color: #800000">image/*</span><span style="color: #800000">"</span> type=<span style="color: #800000">"</span><span style="color: #800000">file</span><span style="color: #800000">"</span> name=<span style="color: #800000">"</span><span style="color: #800000">avatar</span><span style="color: #800000">"</span> id=<span style="color: #800000">"</span><span style="color: #800000">f1</span><span style="color: #800000">"</span>>
    <input type=<span style="color: #800000">"</span><span style="color: #800000">button</span><span style="color: #800000">"</span> value=<span style="color: #800000">"</span><span style="color: #800000">提交</span><span style="color: #800000">"</span> id=<span style="color: #800000">"</span><span style="color: #800000">b1</span><span style="color: #800000">"</span>>
</div>
<script src=<span style="color: #800000">"</span><span style="color: #800000">/static/jquery-3.3.1.min.js</span><span style="color: #800000">"</span>></script>
<script><span style="color: #000000">
$(</span><span style="color: #800000">"</span><span style="color: #800000">#b1</span><span style="color: #800000">"</span><span style="color: #000000">).click(function () {
  var formData </span>= new FormData();            <span style="color: #008000">#</span><span style="color: #008000">生成一个FormData对象</span>
  formData.append(<span style="color: #800000">"</span><span style="color: #800000">csrfmiddlewaretoken</span><span style="color: #800000">"</span>, $(<span style="color: #800000">"</span><span style="color: #800000">[name="csrfmiddlewaretoken"]</span><span style="color: #800000">"</span><span style="color: #000000">).val());
  formData.append(</span><span style="color: #800000">"</span><span style="color: #800000">f1</span><span style="color: #800000">"</span>, $(<span style="color: #800000">"</span><span style="color: #800000">#f1</span><span style="color: #800000">"</span>)[0].files[0]);<span style="color: #008000">#</span><span style="color: #008000">得到用户选中的文件对象,并向formData对象中添加键值对数据</span>
<span style="color: #000000">  $.ajax({
    url: </span><span style="color: #800000">"</span><span style="color: #800000">/upload/</span><span style="color: #800000">"</span><span style="color: #000000">,
    type: </span><span style="color: #800000">"</span><span style="color: #800000">POST</span><span style="color: #800000">"</span><span style="color: #000000">,
    processData: false,                     </span><span style="color: #008000">#</span><span style="color: #008000">告诉jQuery不要去处理发送的数据</span>
    contentType: false,                     <span style="color: #008000">#</span><span style="color: #008000">告诉jQuery不要去设置Content-Type请求头</span>
<span style="color: #000000">    data: formData,
    success:function (data) {                </span><span style="color: #008000">#</span><span style="color: #008000">请求被正常响应时自动执行的回调函数</span>
<span style="color: #000000">      console.log(data)
    }
  })
})
</span></script>
</body>

或者：

var form = document.getElementById(<span style="color: #800000">"</span><span style="color: #800000">form1</span><span style="color: #800000">"</span><span style="color: #000000">);
var fd </span>= new FormData(form);

这样也可以直接通过ajax 的 send() 方法将 fd 发送到后台。

注意：由于 FormData 是 XMLHttpRequest Level 2 新增的接口，现在低于IE10 的IE浏览器不支持 FormData。

views.py:

<span style="color: #0000ff">from</span> django.shortcuts <span style="color: #0000ff">import</span><span style="color: #000000"> render, HttpResponse
</span><span style="color: #0000ff">from</span> django.http <span style="color: #0000ff">import</span><span style="color: #000000"> JsonResponse

</span><span style="color: #0000ff">def</span><span style="color: #000000"> upload(request):
    </span><span style="color: #0000ff">if</span> request.method == <span style="color: #800000">"</span><span style="color: #800000">POST</span><span style="color: #800000">"</span><span style="color: #000000">:
        file_obj </span>= request.FILES.get(<span style="color: #800000">"</span><span style="color: #800000">avatar</span><span style="color: #800000">"</span>) <span style="color: #008000">#</span><span style="color: #008000"> 获取文件对象</span>
        with open(file_obj.name, <span style="color: #800000">"</span><span style="color: #800000">wb</span><span style="color: #800000">"</span>) as f:   <span style="color: #008000">#</span><span style="color: #008000"> file_obj.name  --> 上传文件的文件名          </span>
            <span style="color: #0000ff">for</span> chunk <span style="color: #0000ff">in</span> file_obj.chunks():    <span style="color: #008000">#</span><span style="color: #008000"> 从该文件对象里一点一点读取数据，写入刚新建的文件句柄f</span>
<span style="color: #000000">                f.write(chunk)
        </span><span style="color: #008000">#</span><span style="color: #008000"> return JsonResponse("OK",safe=False)</span>
        <span style="color: #0000ff">return</span> HttpResponse(<span style="color: #800000">"</span><span style="color: #800000">OK</span><span style="color: #800000">"</span><span style="color: #000000">)
    </span><span style="color: #0000ff">return</span> render(request, <span style="color: #800000">"</span><span style="color: #800000">upload.html</span><span style="color: #800000">"</span>)

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]‍，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Python 之 Django框架（ Cookie和Session、Django中间件、AJAX、Django序列化）