当前位置： 移动技术网 > 科技>操作系统>Linux > django中的ajax组件

django中的ajax组件

2018年10月19日  | 移动技术网科技  | 我要评论

目录

django中的ajax

ajax(asynchronous javascript and xml)翻译成英文就是“异步javascript和xml”。即用javascript语言与服务器进行异步交互，传输的数据为xml，（现在使用更多的是json数据）。

向服务器发送请求的途径

  1. 浏览器地址栏 默认是get请求
  2. form表单发送请求：
    get请求
    post请求
  3. a标签 href属性 默认是get请求
  4. ajax()

ajax的特点

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

局部刷新：浏览器页面局部刷新

局部刷新的意思就是当咱们在博客园注册一个新的博客的时候，当咱们输入用户名后鼠标移开的时候，就发送了一个请求，去验证这个用户是否存在，如果存在，则通知用户该用户名已经被注册了。

基于jquery实现的ajax请求

让我们使用pycharm重新创建一个项目，项目名为ajax_demo，应用名为app01。

# url控制器

from django.contrib import admin
from django.urls import path
from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.index),
    path('test_ajax/', views.test_ajax),
]

那么当我们需要有对应的视图函数 index和test_ajax：

# app01-->views.py

from django.shortcuts import render,httpresponse

# create your views here.


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


def test_ajax(request):
    return httpresponse('hello!world!')

在这里匹配了相应的视图然后返回了一个html页面：

# 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
    <h3>功能1：发送ajax请求</h3>
    <p class="content"></p> //这里的内容是空的
    <button class="btn">ajax</button>

    <script>
        $('.btn').click(function(){
            $.ajax({
                url:'/test_ajax/',
                type:'get',
                success:function(data){
                    $('.content').html(data)
                }
            })
        })
    </script>
</body>
</html>

这句话的意思是，当咱们点击button按钮的时候，触发了点击动作，然后发送了一个ajax请求，让我们先看看此时是什么样子的：

当我们点击了按钮的时候，就发送了一个ajax请求：

此时一个简单的ajax请求就发送完成了。

利用ajax实现计算器

首先咱们的中进行布局：

# 

<h3>功能2：利用ajax实现的计算器</h3>
    <input type="text" class="num1">+<input type="text" class="num2">=<input type="text" id="sum"><button class="cal">计算</button>


        $('.cal').click(function(){
            $.ajax({
                url:'/cal/',
                type:'post',
                data:{
                    'n1':$('.num1').val(),
                    'n2':$('.num2').val(),
                },
                success:function(data){
                    console.log(data);
                    $('#sum').val(data);
                }
            })
        })

然后咱们拿到了n1和n2的值，通过请求url发送给相应的视图然后进行数据处理，最后拿到结果再返回给这个ajax。

# views.py

def cal(request):
    print(request.post)
    n1 = int(request.post.get('n1'))
    n2 = int(request.post.get('n2'))
    sum = n1+n2
    return httpresponse(sum)

此时的url控制器需要新添加一条：

    path('cal/', views.cal),

其次是配置文件settings中的这一行需要注释掉：

# 'django.middleware.csrf.csrfviewmiddleware',

此时再查看结果：

利用ajax实现登陆认证

首先咱们要开一个路由，当用户在浏览器输入http://127.0.0.1/login_btn/的时候，就匹配导对应的视图，所以：

# url控制器

from django.contrib import admin
from django.urls import path
from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.index),
    path('test_ajax/', views.test_ajax),
    path('cal/', views.cal),
    path('login/', views.login),
    path('login_btn/', views.login_btn),
]
# login_btn函数

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

然后返回了这个html页面：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
    <h3>利用ajax实现登陆认证</h3>
    <form action="">
        用户名 <input type="text" class="user">
        密码 <input type="password" class="pwd">
        <input type="button" value="submit" class="login_btn">
        <span class="error"></span>
    </form>

    <script>
        $('.login_btn').click(function(){
            $.ajax({
                url:'/login/',
                type:'post',
                data:{
                    'user':$('.user').val(),
                    'pwd':$('.pwd').val(),
                },
                success:function(data){
                    //此时需要进行转换
                    console.log(typeof(data));
                    var data = json.parse(data)
                    console.log(typeof(data));
                    if (data.user){
                        location.href = 'http://www.baidu.com'
                    }else{
                        $('.error').html(data.msg).css({'color':'red'})
                    }
                }

            })
        })
    </script>
</body>
</html>

最后ajax将请求提交到了/login/中，然后进行匹配视图，然后就开始执行对应代码：

def login(request):
    # print(request.post)

    user = request.post.get('user')
    pwd = request.post.get('pwd')

    from .models import user
    user = user.objects.filter(user=user, pwd=pwd).first()

    ret = {
        'user': none,
        'msg': none
    }
    if user:
        ret['user'] = user.user
    else:
        ret['msg'] = 'username or password is wrong!'

    import json
    return httpresponse(json.dumps(ret))

首先打开浏览器，输入错误的用户名和密码：

然后开始输入正确的用户名和密码，就会直接跳转到百度的首页了。

利用form表单进行文件上传

# urls.py

path('file_put/', views.file_put),
# views.py

# 文件的上传
def file_put(request):
    if request.method == 'post':
        print(request.post)

    return render(request, 'file_put.html')
# file_put.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>文件上传</title>
</head>
<body>
    <h3>基于form表单实现的文件上传</h3>
    <form action="" method="post" enctype="multipart/form-data">
        用户名 <input type="text" name="user">
        头像 <input type="file" name="avatar">
        <input type="submit">
    </form>
</body>
</html>

此时咱们输入完用户名和选中完图片后，点击提交咱们查看下打印的信息。

那么是我们的图片没有上传过来吗？当然不是的，是因为上传的图片就不在这里面。让我们在views.py中执行这个代码：

print(request.files)

看到的是这个样子：

那么此时我们就可以确定，这个文件是上传过来了，存放在request.files中，那么咱们使用request.files.get就可以把这个图片对象拿到了。

# views.py
 
 def file_put(request):
    if request.method == 'post':
        print(request.post)  #
        # print(request.body)
        print(request.files)  # 图片信息

        # 将文件给取出来
        img_obj = request.files.get('avatar')
        with open(img_obj.name, 'wb') as f:
            for line in img_obj:
                f.write(line)
        return httpresponse('ok!')

    return render(request, 'file_put.html')

那么此时直接上传的话，那么就会在当前项目下展示这张照片。

利用ajax实现文件上传

首先我们需要新开一个url或者将之前的注释掉：

# urls.py

path('file_put/', views.file_put),

ajax提交文件的方式同样使用form表单，但是不需要给input设置name属性，只需要设置class或者id就可以了：

# file_put.html

    <form action="" method="post">
        用户名 <input type="text" id="user">
        头像 <input type="file" id="avatar" >
        <input type="button" class="btn" value="ajax">
    </form>

那么咱们需要给btn设置点击click动作：

    $('.btn').click(function(){
    
        //涉及到文件上传 需要创建formdata对象
        var formdata = new formdata();
        formdata.append('user',$('#user').val());
        formdata.append('avatar',$('#avatar')[0].files[0]);

        $.ajax({
            url:'',
            type:'post',
            contenttype:false, // 交给formdata处理编码
            processdata:false, //对数据是否进行预处理 如果不做预处理的话 就不做任何编码了
            data:formdata,
            success:function(data){
                console.log(data)
            }
        })
    })

最后在试图函数中进行文件保存操作：

def file_put(request):

    if request.method == "post":
        print("body", request.body)  # 请求报文中的请求体 json
        print("post", request.post)  # if contenttype==urlencoded ,request.post才有数据

        print('files', request.files)
        file_obj=request.files.get("avatar")
        with open(file_obj.name,"wb") as f:
            for line in file_obj:
                f.write(line)

        return httpresponse("ok")

    return render(request, "file_put.html")

content-type

在咱们刚刚的form表单的文件上传和ajax文件上传的时候，都涉及到一个请求头的东西，这个东西是什么呢？这个东西决定着服务器会按照哪种编码格式给你解码，当你默认不写的时候，此时的请求头是：application/x-www-form-urlencoded，当你想发送文件类的东西，此时的请求头应该是：form-data......

当服务器收到客户端发送过来的请求时，首先就会去查看请求头，判断你的请求头是什么，然后进行解码。

让我们分别看下这几个请求头：

x-www-form-urlencoded

application/x-www-form-urlencoded：表单数据编码为键值对，&分隔，可以当成咱们的get请求中?后面的数据，让我们发送一个庶几乎看看：
<form action="" method="post"> 用户名 <input type="text" name="user"> 密码 <input type="password" name="pwd"> <input type="submit" value="submit"> </form>

那么我们需要一个视图函数还进行处理：

def file_put(request):

    if request.method == "post":
        print("body", request.body)  # 请求报文中的请求体 json
        print("post", request.post)  # if contenttype==urlencoded ,request.post才有数据

        return httpresponse("ok")

    return render(request, "file_put.html")

当我们在浏览器输入admin和123的时候，让我们来看下打印的结果是什么：

我们刚刚说过，当我们请求头什么都不写的话，那么就是默认的x-www-form-urlencoded,当请求头是这种的话，此时我们打印request.post是有值的，也就这一种请求方式request.post才有值。

让我们现在发送一个json的数据

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<form action="" method="post">
    用户名 <input type="text" class="user">
    密码 <input type="password" class="pwd">
    <input type="button" value="submit" class="btn">
</form>

<script>
    $('.btn').click(function(){
        $.ajax({
            url:'',
            type:'post',
            data:json.stringify({
                a:1,
                b:2
            }),
            success:function(data){
                console.log(data)
            }

        })
    })
</script>
</body>
</html>

视图函数中是这样的：

def send_json(request):
    if request.method == 'post':
        print('body', request.body)
        print('post', request.post)
        print('files', request.files)
        return httpresponse('ok!')
    return render(request, 'send_json.html')

当我们发送数据的时候，通过解码收到的就是这样的数据：

就和我们刚刚说的一样，当请求头是x-www-form-urlencoded的时候，request.post才会有数据，其他的就没有。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网