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>
相关推荐
unicrom_深圳市由你创科技16 小时前
使用Django框架构建Python Web应用
前端·python·django
ku_code_ku16 小时前
Django由于数据库版本原因导致数据库迁移失败解决办法
后端·python·django
LuckyLay18 小时前
1.2.2 高级特性详解——AI教你学Django
python·django·sqlite
【本人】19 小时前
Django基础(三)———模板
后端·python·django
cg501720 小时前
AJAX 技术
前端·javascript·ajax
白仑色20 小时前
AJAX 入门到精通
前端·javascript·ajax·okhttp·web开发·前端开发
言之。20 小时前
Django中get()与filter()对比
数据库·django·sqlite
小王子102420 小时前
Django 实战:I18N 国际化与本地化配置、翻译与切换一步到位
django·国际化·i18n·web开发
Mr数据杨21 小时前
【Dv3Admin】菜单管理集成阿里巴巴自定义矢量图标库
python·django