Django——Ajax请求

简介: Django——Ajax请求

Django——Ajax请求

一、响应 Json 数据

path('str/' , views.str_view),
path('json/' , views.json_view),
path('jsonresponse/' , views.jsonresponse_view),
path('ls/' , views.ls),
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

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

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

发送原生的 Ajax 请求

<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>
def ajax_regirster(request):
    return render(request , 'ajax_regirster.html')
def ajax_response(request):
    return HttpResponse('Ajax 数据已提交')
path('ajax/' , views.ajax_regirster),
path('ajax_str/' , views.ajax_response , name='ajax')

使用 jquery 发送 Ajax 请求

<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>
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()})
path('ajax2/' , views.jquert_ajax),
path('check_name/' , views.check_name , name='check'),

使用 axios 发送 ajax 请求

<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>


相关文章
|
13天前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
|
20天前
|
前端开发 Python
Django框架中Ajax GET与POST请求的实战应用
Django框架中Ajax GET与POST请求的实战应用
|
20天前
|
JSON 缓存 前端开发
Django视图层探索:GET/POST请求处理、参数传递与响应方式详解
Django视图层探索:GET/POST请求处理、参数传递与响应方式详解
|
7天前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch(&#39;url&#39;).then(r =&gt; r.json()).then(data =&gt; console.log(data)).catch(err =&gt; console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
|
20天前
|
前端开发 JavaScript 安全
跨域问题与Django解决方案:深入解析跨域原理、请求处理与CSRF防护
跨域问题与Django解决方案:深入解析跨域原理、请求处理与CSRF防护
|
2月前
|
JSON 前端开发 JavaScript
Fetch API与Ajax请求
Fetch API是JavaScript的一种新方法,用于网络请求,提供简洁的Promise-based语法和更多功能,如处理头、取消请求及跨域支持,比Ajax更强大。尽管不完全替代Ajax,尤其在老浏览器或需要底层控制时,Fetch API仍是现代浏览器中获取资源的优选工具。例如,以下代码展示了如何使用Fetch API进行GET和POST请求。
|
2月前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
36 3
N..
|
2月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
44 1
|
2月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
34 0
|
2月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
81 0