Django框架基础之ajax

对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上。

1、传统的Web应用

一个简单操作需要重新加载全局数据

2、AJAX

AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案。

  • 异步的JavaScript:
    使用 【JavaScript语言】 以及 相关【浏览器提供类库】 的功能向服务端发送请求,当服务端处理完请求之后,【自动执行某个JavaScript的回调函数】。
    PS:以上请求和响应的整个过程是【偷偷】进行的,页面上无任何感知。
  • XML
    XML是一种标记语言,是Ajax在和后台交互时传输数据的格式之一

利用AJAX可以做:
1、注册时,输入用户名自动检测用户是否已经存在。
2、登陆时,提示用户名密码错误
3、删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。(博客园)

原生ajax

Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件)。

提交数据:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <input type="text" id="i1">
 9 +
10 <input type="text" id="i2">
11 =
12 <input type="text" id="i3">
13 <input type="button" value=‘jquery ajax‘ onclick="add1()">
14 <input type="button" value=‘原生 ajax‘ onclick="add2()">
15 </body>
16 <script src="/static/jquery-3.2.1.js"></script>
17 <script>
18     //jquery  ajax 提交请求
19     function add1(){
20          $.ajax({
21              url:‘/add1/‘,
22              type:‘POST‘,
23              data:{‘a1‘:$(‘#i1‘).val(),‘a2‘:$(‘#i2‘).val()},
24              success:function(data){
25                  $(‘#i3‘).val(data);
26              }
27          })
28     }
29     //原生ajax 以get的方式提交请求
30     function add2(){
31         var xhr= new XMLHttpRequest();
32         xhr.onreadystatechange=function(){
33             if(xhr.readyState==4){
34                 alert(xhr.responseText)
35             }
36         };
37         xhr.open(‘GET‘,‘/add2/?i1=12&i2=19‘);
38         xhr.send();
39     }
40     //原生ajax 以post的方式提交请求
41     function add2() {
42         var xhr= new XMLHttpRequest();
43         xhr.onreadystatechange=function(){
44             if(xhr.readyState==4){
45                 alert(xhr.responseText)
46             }
47         };
48         xhr.open(‘POST‘,‘/add2/‘);
49         xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
50         xhr.send(‘i1=12&i2=19‘);
51     }
52 </script>
53 </html>

XmlHttpRequest对象的主要方法:

 1 a. void open(String method,String url,Boolen async)
 2    用于创建请求
 3
 4    参数:
 5        method: 请求方式(字符串类型),如:POST、GET、DELETE...
 6        url:    要请求的地址(字符串类型)
 7        async:  是否异步(布尔类型)
 8
 9 b. void send(String body)
10     用于发送请求
11
12     参数:
13         body: 要发送的数据(字符串类型)
14
15 c. void setRequestHeader(String header,String value)
16     用于设置请求头
17
18     参数:
19         header: 请求头的key(字符串类型)
20         vlaue:  请求头的value(字符串类型)
21
22 d. String getAllResponseHeaders()
23     获取所有响应头
24
25     返回值:
26         响应头数据(字符串类型)
27
28 e. String getResponseHeader(String header)
29     获取响应头中指定header的值
30
31     参数:
32         header: 响应头的key(字符串类型)
33
34     返回值:
35         响应头中指定的header对应的值
36
37 f. void abort()
38
39     终止请求

XmlHttpRequest对象的主要属性:

 1 a. Number readyState
 2    状态值(整数)
 3
 4    详细:
 5       0-未初始化,尚未调用open()方法;
 6       1-启动,调用了open()方法,未调用send()方法;
 7       2-发送,已经调用了send()方法,未接收到响应;
 8       3-接收,已经接收到部分响应数据;
 9       4-完成,已经接收到全部响应数据;
10
11 b. Function onreadystatechange
12    当readyState的值改变时自动触发执行其对应的函数(回调函数)
13
14 c. String responseText
15    服务器返回的数据(字符串类型)
16
17 d. XmlDocument responseXML
18    服务器返回的数据(Xml对象)
19
20 e. Number states
21    状态码(整数),如:200、404...
22
23 f. String statesText
24    状态文本(字符串),如:OK、NotFound...

 jquery ajax

jQuery其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能。

  • jQuery 不是生产者,而是大自然搬运工。
  • jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject

 1 jQuery.get(...)
 2                 所有参数:
 3                      url: 待载入页面的URL地址
 4                     data: 待发送 Key/value 参数。
 5                  success: 载入成功时回调函数。
 6                 dataType: 返回内容格式,xml, json,  script, text, html
 7
 8
 9             jQuery.post(...)
10                 所有参数:
11                      url: 待载入页面的URL地址
12                     data: 待发送 Key/value 参数
13                  success: 载入成功时回调函数
14                 dataType: 返回内容格式,xml, json,  script, text, html
15
16
17             jQuery.getJSON(...)
18                 所有参数:
19                      url: 待载入页面的URL地址
20                     data: 待发送 Key/value 参数。
21                  success: 载入成功时回调函数。
22
23
24             jQuery.getScript(...)
25                 所有参数:
26                      url: 待载入页面的URL地址
27                     data: 待发送 Key/value 参数。
28                  success: 载入成功时回调函数。
29
30
31             jQuery.ajax(...)
32
33                 部分参数:
34
35                         url:请求地址
36                        type:请求方式,GET、POST(1.9.0之后用method)
37                     headers:请求头
38                        data:要发送的数据
39                 contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
40                       async:是否异步
41                     timeout:设置请求超时时间(毫秒)
42
43                  beforeSend:发送请求前执行的函数(全局)
44                    complete:完成之后执行的回调函数(全局)
45                     success:成功之后执行的回调函数(全局)
46                       error:失败之后执行的回调函数(全局)
47
48
49                     accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型
50                    dataType:将服务器端返回的数据转换成指定类型
51                                    "xml": 将服务器端返回的内容转换成xml格式
52                                   "text": 将服务器端返回的内容转换成普通文本格式
53                                   "html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。
54                                 "script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式
55                                   "json": 将服务器端返回的内容转换成相应的JavaScript对象
56                                  "jsonp": JSONP 格式
57                                           使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数
58
59                                   如果不指定,jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string
60
61                  converters: 转换器,将服务器端的内容根据指定的dataType转换类型,并传值给success回调函数
62                          $.ajax({
63                               accepts: {
64                                 mycustomtype: ‘application/x-some-custom-type‘
65                               },
66
67                               // Expect a `mycustomtype` back from server
68                               dataType: ‘mycustomtype‘
69
70                               // Instructions for how to deserialize a `mycustomtype`
71                               converters: {
72                                 ‘text mycustomtype‘: function(result) {
73                                   // Do Stuff
74                                   return newresult;
75                                 }
76                               },
77                             });

 伪ajax

iframe标签:会创建包含另外一个文档的内联框架,可以在不刷新网页的情况下提交请求

伪ajax 提交数据: 可以在不刷新网页的情况下替form表单提交请求
        <form id=‘f1‘ method=‘POST‘ action="/fake_ajax/" target="ifr" >
                 {% csrf_token %}
            <iframe id="ifr" name="ifr" ></iframe>
            <input type="text" name="user">
            <a onclick="submitForm()">提交</a>
       </form>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <form id=‘f1‘ method=‘POST‘ action="/fake_ajax/" target="ifr" >
 9     {% csrf_token %}
10     <iframe id="ifr" name="ifr" ></iframe>
11     <input type="text" name="user">
12     <a onclick="submitForm()">提交</a>
13 </form>
14 <script>
15     function submitForm(){
16         document.getElementById(‘f1‘).submit();
17         document.getElementById(‘ifr‘).onload=loadframe;
18     }
19     function loadframe(){
20         var content=document.getElementById(‘ifr‘).contentWindow.document.body.innerText;
21         alert(content);
22     }
23 </script>
24 </body>
25 </html>

上传文件

form表单上传文件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <form action="/f1/" method="post" enctype="multipart/form-data">
 9     {% csrf_token %}
10     <input type="file" name="fafafa">
11     <input type="submit" value="提交">
12 </form>
13 </body>
14 </html>

 1 def f1(request):
 2     if request.method==‘GET‘:
 3         return render(request,‘f1.html‘)
 4     else:
 5         import os
 6         file_obj=request.FILES.get(‘fafafa‘)
 7         f=open(os.path.join(‘static‘,file_obj.name),‘wb‘)
 8         for chunk in file_obj.chunks():
 9             f.write(chunk)
10         return render(request,‘f1.html‘)

基于form组价验证的文件上传

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <form method=‘POST‘ action="/f2/" enctype="multipart/form-data">
 9     {% csrf_token %}
10    {{ obj.fafafa }}{{ obj.errors.fafafa.0 }}
11     <input type="submit" value="提交">
12 </form>
13 </body>
14 </html>

 1 class f2Form(Form):
 2     fafafa=fields.FileField()
 3
 4 def f2(request):
 5     if request.method==‘GET‘:
 6         obj=f2Form()
 7         return render(request,‘f2.html‘,{‘obj‘:obj})
 8     else:
 9         obj=f2Form(files=request.FILES)
10         if obj.is_valid():
11             print(‘afdvfdvgrg‘)
12             print(obj.cleaned_data.get(‘fafafa‘).name)
13             print(obj.cleaned_data.get(‘fafafa‘).size)
14         return render(request,‘f2.html‘,{‘obj‘:obj})

原生ajax   jquery ajax   伪ajax上传文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>原生ajax上传文件</h1>
    <input type="file" id="i1">
    <a onclick="upload1()">上传</a>
    <div id="container1"></div>

    <h1>jquery ajax上传文件</h1>
    <input type="file" id="i2">
    <a onclick="upload2()">上传</a>
    <div id="container2"></div>

     <h1>伪ajax上传文件</h1>
    <form action="/upload/" method="post" id="f1" target="ifr" enctype="multipart/form-data">
        <iframe id="ifr" name="ifr"></iframe>
        <input type="file" name="fafafa">
        <a onclick="upload3()">上传</a>
        <div id="container3"></div>
    </form>
</body>
<script src="/static/jquery-3.2.1.js"></script>
<script>
    function upload1() {
        var formData=new FormData();
        formData.append(‘k1‘,‘v1‘);
        formData.append(‘fafafa‘,document.getElementById(‘i1‘).files[0]);

        var xhr=new XMLHttpRequest();
        // 预览功能
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                var file_path=xhr.responseText;
                var tag=document.createElement(‘img‘);
                tag.src=‘/‘+file_path;
                document.getElementById(‘container1‘).appendChild(tag);
            }
        }
        xhr.open(‘POST‘,‘/upload/‘);
        xhr.send(formData)
    }

    function upload2() {
        var formData=new FormData();
        formData.append(‘k1‘,‘v1‘);
        formData.append(‘fafafa‘,$(‘#i2‘)[0].files[0]);

        $.ajax({
            url:‘/upload/‘,
            type:‘post‘,
            data:formData,
            contentType:false,
            processData:false,
            success:function(arg){
                var tag=document.createElement(‘img‘);
                tag.src=‘/‘+arg;
                $(‘#container2‘).append(tag);
            }
        })
    }

    function upload3(){
        document.getElementById(‘f1‘).submit();
        document.getElementById(‘ifr‘).onload=loadiframe;
    }
    function loadiframe(){
        var content=document.getElementById(‘ifr‘).contentWindow.document.body.innerText;
        var tag=document.createElement(‘img‘);
        tag.src=‘/‘+content;
        $(‘#container3‘).append(tag);
    }
</script>
</html>
def upload(request):
    if request.method==‘GET‘:

        return render(request,‘upload.html‘)
    else:
        print(request.POST,request.FILES)
        file_obj=request.FILES.get(‘fafafa‘)
        print(file_obj.name)
        file_path=os.path.join(‘static‘,file_obj.name)
        with open(file_path,‘wb‘) as f:
            for chunk in file_obj.chunks():
                f.write(chunk)

        return HttpResponse(file_path)
时间: 2024-10-11 01:39:45

Django框架基础之ajax的相关文章

框架基础:ajax设计方案(三)---集成ajax上传技术

之前发布了ajax的通用解决方案,核心的ajax发布请求,以及集成了轮询.这次去外国网站逛逛,然后发现了ajax level2的上传文件,所以就有了把ajax的上传文件集成进去的想法,ajax方案的level2的改进就不介绍了,不清楚的可到前几篇博客去看看.我们直接切入主题. 概念介绍: 1. js的FormData:js中在新的版本中已经支持了FormData对象,可以初始化一个空的form,或者初始化已经存在的form,浏览器测试代码. 2. 浏览器的支持:浏览器已支持input=file的

框架基础:ajax设计方案(一)---集成核心请求

框架基础:ajax设计方案(一)---集成核心请求 框架基础:ajax设计方案(一)---集成核心请求 报告,我要说话!xp被历史淘汰了,IE6 say goodbye了,太TM开心了,从此不要兼容IE6了,哈哈哈哈哈哈 报告,我要说话!IE这sb为啥不早点被杀掉呢,找工作听说要兼容IE,立马软了,唉唉唉唉唉唉 报告,我要说话!Jquery太丰富了,老子只用了几个功能,妈的,太不划算了,啊啊啊啊啊啊 ...... 好了,言归正传.对于想到整理ajax设计方案,原因如下: 从资源合理利用的角度以及

Django框架基础(一)

Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. 1 安装 1 pip3 install django 2 # 创建Django程序 3 django-admin startproject mysite 4 # 进入程序目录 5 cd mysite 6 # 启动socket服务端,等待用户发送请求 7 python manage.py runse

Django框架基础

Django基础-Lesson1 web框架概念 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统. 对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端.  socket模拟服务端 最简单的Web应用就是先把HTML用文件保存好,用一个现成的HTTP服务器软件,接收用户请求,从文件中读取HTML,返回. 如果要动态生成HTML,就需要把上述步骤自己来实现.不过,接受HTTP

Django框架基础之Form组件

服务端假设所有用户提交的数据都是不可信任的,所以Django框架内置了form组件来验证用户提交的信息 form组件的2大功能:       1 验证(显示错误信息)       2 保留用户上次输入的信息                  -- 可以生成html标签应用: class A_Form(Form): 字段=fields.字段类型(默认参数: required=True, widget=widgets.插件(attrs={})) 常用字段:Charfield,RegexField,I

django框架基础-django redis-长期维护-20191220

###############   django框架-django redis    ############### ###############   django框架-django redis    ############### ###############   django框架-django redis    ############### ###############   django框架-django redis    ############### ##############

django框架基础-django的中间件-长期维护-20200113

##################    中间件      ####################### ##################    中间件      ####################### ##################    中间件      ####################### ##################    中间件      ####################### ##################    中间件     

Django框架开发-基于Ajax实现的登录

---恢复内容开始--- 一.需要知道的新知识点 1.刷新验证码,给src属性加一个?号.加个?会重新去请求 # 给验证码刷新 $(".vialdCode_img").click(function () { 方式一:dom方法 $(this)[0].src+="?"#} 方式二:jQuery的attr方法 $(this).attr("src",$(this).attr("src")+'?') }) }) 2.当登录成功跳转,或

Django框架基础学习

Django安装 python下载地址 http://www.python.org/download/releases/3.3.4/ Django的下载地址:https://www.djangoproject.com/download/ 1)安装(进到解压目录) python setup.py install 2.配置环境变量(PATH) C:/Python27/Lib/site-packages/django;C:/Python27/Scripts; 3.检查是否安装成功,可以在dos下进入D