Ajax

一 Ajax简介

    翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在更多使用json数据)。AJAX 不是新的编程语言,而是一种使用现有标准的新方法.

  特点:

    1.异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。

    2.浏览器页面局部刷新;(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

  

  2.示例

login.html里面内容

{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!--      告诉浏览器安装IE的最高版本渲染浏览器-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--      整个网站和等比缩放,目的兼容:移动端,web端。可以完整访问网站-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>标题</title>
    <!-- Bootstrap  引入文件 -->
    <link href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}" rel="stylesheet">

</head>
<body>
<h1>你好,欢迎来到登录页面</h1>

<form action="/login/" method="post">
    {% csrf_token %}
    用户名 <input type="text" id="username" name="username">
    密码 <input type="password" id="pwd" name="password">
{#    <input type="submit" id="btn">#}
{#    <button>提交</button>#}

    <input type="button" id="btn" value="确认">
</form>
{#<button id="btn">提交</button>#}

<script src="{% static 'jquery-3.5.1.js' %}"></script>
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<script>
    $("#btn").click(function () {
        $.ajax({
            url:'/login/',//方式1:直接获取请求地址不要忘了加双引号或者单引号
            {#url:'{% url "login" %}',//方式2:通过url以及别名获取地址#}
            type:'post',
            data:{
             uname:$('#username').val(),
             pwd:$('#pwd').val(),
             csrfmiddlewaretoken:$('[name=csrfmiddlewaretoken]').val(), //方式1:直接获取。因为我们表单中使用csrf_token,这个html文档中就是一个p标签,name属性等于csrfmiddlewaretoken,他的value值就是crstoken,因此我们可以通过js获取值
             {#csrfmiddlewaretoken:'{% csrf_token %}',}//方式2:通过url以及别名获取地址#}

            },
            //res就是返回的响应数据
            success:function (res) {
                var retStr = JSON.parse(res);//json序列化
                if (retStr['code']===302){
var spanEle = document.createElement('span');
                    $(spanEle).text(retStr['msg']);
                    $('form').append(spanEle);

                }else if(retStr['code']===0){
                    location.href = retStr['login_url']
                }
                console.log(retStr,typeof retStr)
            }

        })
    })
</script>

</body>
</html>

  views.py里面的内容

from django.shortcuts import render,HttpResponse,redirect
from django.views import View
# Create your views here.

import json


class LoginView(View):

    def get(self,request):
        return render(request,'login.html')

    def post(self,request):
        # name = request.POST.get('username')
        # pwd = request.POST.get('pwd')
        #ajax data里面的键来获取数据
        name = request.POST.get('uname')//必须使用ajax传的data里面参数名称来获取
        pwd = request.POST.get('pwd')

        if name=='zxb' and pwd =='123':
            # return render(request,'index.html')
            ret = {'code':0,'login_url':'/index/'}
            return HttpResponse(json.dumps(ret))
        else:
            # ret = {'code':302,'redirect_url':'/login/'}
            ret = {'code':302,'msg':'用户名或者密码错误!!!'}
            return HttpResponse(json.dumps(ret))

def index(request):
    return render(request,'index.html')

  urls.py里面的内容

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/', views.LoginView.as_view(),name='login'),
    url(r'^index/', views.index,name='index'),
]

  注意:如果我们的ajax的js代码写在js文件中,我们html通过引入来执行js代码,我们就不可以使用  url:'{% url "login" %},csrfmiddlewaretoken:'{% csrf_token %}',这种形式因为我们js文件中不认识这些,这些只是在html文件中才可以使用,如果要在js中使用我们就要用方式1。如下就是js文件中代码

$("#btn").click(function () {
        $.ajax({
            url:'/login/',
            //url:'{% url "login" %}',
            type:'post',
            data:{
             uname:$('#username').val(),
             pwd:$('#pwd').val(),
             csrfmiddlewaretoken:$('[name=csrfmiddlewaretoken]').val(),
             //csrfmiddlewaretoken:'{% csrf_token %}',
            },
            //res就是返回的响应数据
            success:function (res) {
                var retStr = JSON.parse(res)
                if (retStr['code']===302){
                    var spanEle = document.createElement('span');
                    $(spanEle).text(retStr['msg']);
                    $('form').append(spanEle);

                }else if(retStr['code']===0){
                    location.href = retStr['login_url']
                }
                console.log(retStr,typeof retStr)
            }

        })
    })

 

4.AJAX的优缺点

    优点:

      1.AJAX使用JavaScript技术向服务器发送异步请求;

      2.AJAX请求无须刷新整个页面;

      3.因为服务器响应内容不再是整个页面,而是页面中的部分内容,所以AJAX性能

四 Ajax文件上传

  请求头ContentType

    ContentType指的是请求体的编码类型,常见的类型共有3种

    1 application/x-www-form-urlencoded

      这应该是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单,如果不设置 contentType 属性,那么最终就会以 默认格式application/x-www-form-urlencoded 方式提交数据,ajax默认也是这个。请求类似于下面这样(无关的请求头在本文中都省略掉了):

 Ajax  

    2 multipart/form-data

          这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时,必须让 <form> 表单的 contentType 等于 multipart/form-data,form表单不支持发json类型的contenttype格式的数据,而ajax什么格式都可以发,也是ajax应用广泛的一个原因。直接来看一个请求示例:(了解)

 

上一篇:路飞学城-python开发集训-第1章


下一篇:python 大文件以行为单位读取方式比对