Django——Ajax请求

Django------Ajax请求

一、响应 Json 数据

python 复制代码

path('str/' , views.str_view),
path('json/' , views.json_view),
path('jsonresponse/' , views.jsonresponse_view),
path('ls/' , views.ls),

python 复制代码

from django.shortcuts import render , HttpResponse
from django.http import JsonResponse
import json

def str_view(request):
    str = {"name":"阿宸" , "adder":"广州"}
    str_json = json.dumps(str , ensure_ascii=False)
    return HttpResponse(str_json)

def json_view(request):
    response = HttpResponse(content_type='application/json ; charset=utf-8')
    # 将数据写入到响应对象中
    response.write({"name":"阿宸" , "adder":"广州"})
    return response

def jsonresponse_view(request):
    # isinstance(data, dict)
    return JsonResponse({"name":"阿宸" , "adder":"广州"},
                        json_dumps_params={'ensure_ascii':False})

def ls(request):
    return JsonResponse(['境界' , '盾山'] , safe=False , json_dumps_params={'ensure_ascii':False})

二、Ajax 请求

Ajax 是一个异步操作，可以在不加载整个页面的前提下，进行局部的更新数据

Ajax 发送请求之后，代码是可以继续往后面执行，直到操作的事件结束。

Django 项目配置静态文件：在项目中创建一个文件夹：static

在配置文件中，配置项目的搜索路径

python 复制代码

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

发送原生的 Ajax 请求

html 复制代码

<body>
<form>
    {% csrf_token %}
    <p>用户名：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password"></p>
    <input type="button" value="登录" id="btn">
</form>

<script>
    $('#btn').click(function () {
        $.ajax({
            // 响应的 url ， 发送请求类型， 携带的数据
            url:'{% url "ajax" %}',
            type: 'post',
            data:{
                username:$('[name=username]').val(),
                password:$('[name=password]').val(),
                // 获取 csrf 跨站点防御的令牌字段值
                csrfmiddlewaretoken:$('[name=csrfmiddlewaretoken]').val(),
            },
            success:function (data) {
                // data 是后端传递过来的数据
                console.log(data)
            }
        })
    })
</script>
</body>

python 复制代码

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

def ajax_response(request):
    return HttpResponse('Ajax 数据已提交')

python 复制代码

path('ajax/' , views.ajax_regirster),
path('ajax_str/' , views.ajax_response , name='ajax')

使用 jquery 发送 Ajax 请求

html 复制代码

<body>
<form>
    {% csrf_token %}
    <p>用户名：<input type="text" name="username" id="mingzi"></p>
    <span style="color: red" id="error"></span>
    <p>密码：<input type="password" name="password"></p>
    <input type="submit" value="注册">
</form>
<script>
    $(function () {
        error_chack_name = false
        $('#mingzi').blur(function () {
            // 调用方法
            // 方法执行的时间 ， 当绑定的文本失去焦点的时候执行
            check_name()
        })
        // 检验用户名是否合法 检验用户名是否重复
        function check_name() {
            // 获取用户名
            var username = $('#mingzi').val()
            if(username.length > 3 && username.length < 15){
                // 向后端发送 ajax 请求
                $.post(
                    // 请求 的 url
                    "{% url 'check' %}",
                    // 请求参数
                    {
                        name : username,
                        csrfmiddlewaretoken:'{{ csrf_token }}'
                    },
                    // 调用回调函数 ， 接收后端传递过来的数据
                    function (data) {
                        // count 数据
                        if(data.count > 0){
                            $('#error').html('用户名已存在')
                            $('#error').show()
                            error_chack_name = false;
                        } else {
                            error_chack_name = true;
                            $('#error').hide()
                        }
                    }
                )
            } else {
                // 用户名长度不合格
                // 显示错误信息
                $('#error').html('用户名长度不合格')
                $('#error').show()
                error_chack_name = false
            }
        }
    })
</script>
</body>

python 复制代码

def jquert_ajax(request):
    return render(request, 'jquery_ajax.html')

def check_name(request):
    name = request.POST.get('name')
    users = user.objects.filter(name=name)
    return JsonResponse({'count':users.count()})

python 复制代码

path('ajax2/' , views.jquert_ajax),
path('check_name/' , views.check_name , name='check'),

使用 axios 发送 ajax 请求

html 复制代码

<body>
<div id="user">
    <form>
        {% csrf_token %}
        {# @blur 绑定 vue 方法 ， v-model  vue 获取文本框的数据#}
        <p>用户名：<input type="text" name="username" v-model="username" @blur="check_name"></p>
        <span style="color: red" v-show="error_name">[[ error_name_message ]]</span>
        <p>密码：<input type="password" name="password" v-model="password"></p>
        <input type="submit" value="注册">
    </form>
</div>
<script>
    // 新建 vue 对象
    let vm = new Vue({
        // 通过 ID 选择器获取绑定的标签
        el:'#user',
        // 修改 vue 的模板语法
        delimiters: ['[[',']]'],
        // 获取表单中的数据
        data:{
            // 根据标签绑定 获取v-model 的值
            username:'',
            password:'',

            // 标记错误信息标签 ， 默认为 false , 隐藏标签
            error_name:false,

            // 定义异常信息
            error_name_message:''
        },

        // 定义绑定的方法
        methods:{
            check_name(){
                let name_long = this.username.length;
                if(name_long > 3 && name_long < 15){
                    this.error_name = false;
                } else {
                    // 长度不合格
                    this.error_name = true;
                    // 设置异常信息
                    this.error_name_message = '用户名长度不合格'
                }
                if(this.error_name == false){
                    // 检验用户是否重复
                    axios.get(
                        // 请求的url:/ajax_str/?name=acac
                        '/ajax_str/?name='+this.username,
                        // 请求头 ， 响应类型
                        {responseType : 'json'}
                    )
                        // 请求成功
                        .then(response =>{

                            // 获取请求成功之后 ， 后端返回的数据
                            // 数据封装在 response的data 中
                            if(response.data.code > 0){
                                console.log(response.data.code)
                                // 用户名已存在
                                this.error_name = true;
                                this.error_name_message = '用户名已存在'
                            } else {
                                // 用户名不存在
                                this.error_name = false;
                            }
                        })
                }
            }
        }
    })
</script>
</body>