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>