【Django】教程-1-安装+创建项目+目录结构介绍
【Django】教程-2-前端-目录结构介绍
【Django】教程-3-数据库相关介绍
【Django】教程-4-一个增删改查的Demo
【Django】教程-5-ModelForm增删改查+规则校验【正则+钩子函数】
【Django】教程-6-搜索框-条件查询前后端
【Django】教程-7-分页,默认使用django的
【Django】教程-8-页面时间组件
【Django】教程-9-登录+退出
16. ajax
16.1 GET请求
login目录text.html
html
{% extends 'login/layout.html' %}
{% block content %}
<h3>示例 1</h3>
<input id="btn1" type="button" class="btn-primary" value="点击1" onclick="clickMe();"/>
{% endblock %}
{% block js %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function clickMe() {
console.log("进来了")
$.ajax({
url: '/task/ajax/',
type: 'get',
data: {
n1: 123,
n2: 456
},
success: function (res) {
console.log(res);
}
})
}
</script>
{% endblock %}
views目录account.py
文件
python
def task_list(r):
"显示一个页面,用于ajax"
return render(r, 'login/test.html')
def task_ajax(req):
print(req.method)
print(req.GET.get('n1'))
return HttpResponse("成功了!")
urls.py
python
from django.urls import path
from appTang.views import department_views, user_views, admin_views, account
# 映射关系,视图--->函数
urlpatterns = [
path('task/list', account.task_list),
path('task/ajax/', account.task_ajax),
]
16.1 POST请求
html
{% block js %}
<script type="text/javascript">
function clickMe() {
console.log("进来了")
$.ajax({
url: '/task/ajax/',
type: 'post',
data: {
n1: 123,
n2: 456
},
success: function (res) {
console.log(res);
}
})
}
</script>
{% endblock %}
python
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt # 对单个函数关掉,csrf校验
def task_ajax(req):
print(req.method)
print(req.POST)
return HttpResponse("成功了!")
16.3 绑定事件
html
{% block js %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function (){
// 页面框架加载完成之后,代码自动执行
bindBtnEvent();
})
function bindBtnEvent(){
{# 可以,发送ajax请求 #}
$.ajax({
url: '/task/ajax/',
type: 'post',
data: {
n1: 123,
n2: 456
},
success: function (res) {
console.log(res);
}
})
}
</script>
{% endblock %}
16.4 ajax请求返回值
ajax 通常都是返回json格式数据
python
data_dict = {"status": True, "data": [11, 22, 33, 44]}
# 两种方式都可以
# json_string = json.dumps(data_dict)
# return HttpResponse(json_string)
return JsonResponse(data_dict)
js
$.ajax({
url: '/task/ajax/',
type: 'post',
data: {
n1: 123,
n2: 456
},
{# 将返回值,变成json对象 ,后面可以直接 .属性#}
dataType: "JSON",
success: function (res) {
console.log(res);
console.log(res.data);
}
})
16.5 表单提交
两种方式,一种form,一种一个一个的val
$("#form3").serialize()
n1: $("#txtUser").val(),
html
{% extends 'login/layout.html' %}
{% block content %}
<div>
<div class="container">
<h3>示例2 </h3>
<input type="text" id="txtUser" placeholder="姓名"/>
<input type="text" id="txtAge" placeholder="年龄"/>
<input type="button" id="btn2" class="btn btn-primary" value="点击2"/>
<h3>示例3 </h3>
<form id="form3">
<input type="text" name="username" placeholder="姓名"/>
<input type="text" name="age" placeholder="年龄"/>
<input type="text" name="email" placeholder="邮箱"/>
<input type="text" name="more" placeholder="简介"/>
</form>
<input type="button" id="btn3" class="btn btn-primary" value="点击3"/>
</div>
</div>
{% endblock %}
{% block js %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
bindBtn2Event();
bindBtn3Event();
})
function bindBtn2Event() {
$("#btn2").click(function () {
$.ajax({
url: '/task/ajax/',
type: 'post',
data: {
n1: $("#txtUser").val(),
n2: $("#txtAge").val(),
},
dataType: "JSON",
success: function (res) {
console.log(res);
console.log(res.status);
}
})
})
}
function bindBtn3Event() {
$("#btn3").click(function () {
$.ajax({
url: '/task/ajax/',
type: 'post',
data: $("#form3").serialize(),
dataType: "JSON",
success: function (res) {
console.log(res);
console.log(res.data);
}
})
})
}
</script>
{% endblock %}