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