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>
