django学习入门系列之第十点《A 案例：员工管理系统15》

文章目录

15 认识Ajax
- 15.4 ajax请求的返回值
- - 实例2：前端输入数据提交到后端
  - 实例3：传输多个数据
往期回顾

15 认识Ajax

15.4 ajax请求的返回值

一般数据交互整合的都是json格式
后端一般会返回一个JSON格式
返回json格式一般有以下两种写法

上面注释的两行是手动的，下面那个可以直接帮你省操作，两者本质都是一样的
虽然后端返回的是json格式，但是前端接收到时候相当于一个“字符串”
前端虽然拿到了json格式的内容，但是也很难改里面的对象，所以需要在前端进行一个反序列化的操作

dataType:"JSON",

@csrf_exempt
def task_ajax(request):# 任务列表print(request.POST)data_dict = {"status": True, 'data': [11, 22, 33, 44]}return HttpResponse(json.dumps(data_dict))

{% extends 'model.html' %}
{% load static %}
{% block content %}<h1>123</h1><label><input id="btn1" type="text" class="btn btn-primary" value="点击"/></label><script src="{% static 'js/js.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.js' %}"></script><script type="text/javascript">$(function () {{#页面框架加载完成之后代码自动执行#}bindBtn1Event();})function bindBtn1Event() {$("#btn1").click(function () {$.ajax({url: '/task/ajax/',type: "post",data: {n1: 123,n2: 456,},dataType:"JSON",success: function (res) {console.log(res);console.log(res.status);console.log(res.data);}})})}</script>
{% endblock %}

这样的话，前端拿到数据之后，会自动帮你转化成一个对象

实例2：前端输入数据提交到后端

@csrf_exempt
def task_ajax(request):# 任务列表print(request.POST)data_dict = {"status": True, 'data': [11, 22, 33, 44]}return HttpResponse(json.dumps(data_dict))

{% extends 'model.html' %}
{% load static %}
{% block content %}<h1>示例1</h1><label><input id="btn1" type="text" class="btn btn-primary" value="点击"/></label><h1>示例2</h1><label><input type="text" id="txtUser" placeholder="姓名"/><input type="text" id="txtAge" placeholder="年龄"/><input id="btn2" type="text" class="btn btn-primary" value="点击"/></label>
<script src="{% static 'js/js.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.js' %}"></script><script type="text/javascript">$(function () {{#页面框架加载完成之后代码自动执行#}bindBtn1Event();bindBtn2Event();})function bindBtn1Event() {$("#btn1").click(function () {$.ajax({url: '/task/ajax/',type: "post",data: {n1: 123,n2: 456,},dataType:"JSON",success: function (res) {console.log(res);console.log(res.status);console.log(res.data);}})})}function bindBtn2Event() {$("#btn2").click(function () {$.ajax({url: '/task/ajax/',type: "post",data: {name: $("#txtUser").val(),age: $("#txtAge").val(),},dataType:"JSON",success: function (res) {console.log(res);}})})}</script>
{% endblock %}

在这里插入图片描述

实例3：传输多个数据

案例2的升级版，如果是需要传输多个数据的时候，直接用

$('#id号').serialize(),

{% extends 'model.html' %}
{% load static %}
{% block content %}<h1>示例1</h1><label><input id="btn1" type="text" class="btn btn-primary" value="点击"/></label><h1>示例2</h1><label><input type="text" id="txtUser" placeholder="姓名"/><input type="text" id="txtAge" placeholder="年龄"/><input id="btn2" type="text" class="btn btn-primary" value="点击"/></label><h1>示例3</h1><form id="form3"><label><input type="text" name="User" placeholder="姓名"/><input type="text" name="Age" placeholder="年龄"/><input type="text" name="Email" placeholder="邮箱"/><input type="text" name="More" placeholder="介绍"/><input id="btn3" type="text" class="btn btn-primary" value="点击"/></label></form><script src="{% static 'js/js.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.js' %}"></script><script type="text/javascript">$(function () {{#页面框架加载完成之后代码自动执行#}bindBtn1Event();bindBtn2Event();bindBtn3Event();})function bindBtn1Event() {$("#btn1").click(function () {$.ajax({url: '/task/ajax/',type: "post",data: {n1: 123,n2: 456,},dataType:"JSON",success: function (res) {console.log(res);console.log(res.status);console.log(res.data);}})})}function bindBtn2Event() {$("#btn2").click(function () {$.ajax({url: '/task/ajax/',type: "post",data: {name: $("#txtUser").val(),age: $("#txtAge").val(),},dataType:"JSON",success: function (res) {console.log(res);}})})}function bindBtn3Event() {$("#btn3").click(function () {$.ajax({url: '/task/ajax/',type: "post",{#这样相当于帮你把所有制都给传过去了#}data: $('#form3').serialize(),dataType:"JSON",success: function (res) {console.log(res);}})})}</script>
{% endblock %}

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1：用户注册】
7.【案例2：用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】
10.【CSS基础样式介绍1】
11.【CSS基础样式介绍2】
12.【CSS基础样式介绍3】
13.【CSS基础样式介绍3】
14.【案例小米商城头标】
15.【案例小米商城头标总结】
16.【案例小米商城二级菜单】
17.【案例商品推荐部分】
18.【伪类简单了解】
19.【position】
20.【案例小米商城中app图标代码】
21.【边框及总结】
22.【BootSrap初了解】
23.【BootSrap的目录栏】
24.【BootSrap的栅格系统】
25.【案例博客案例】
26.【案例登录】
27.【案例后台管理样例】
28.【图标】
29.【BootStrap依赖】
30.【javascript初了解】
31.【jJavaScript的变量】
32.【JavaScript的字符串类型】
33.【JavaScript的数组介绍】
34.【案例动态数据】
35.【javascript 对象（字典）】
36.【案例动态表格】
37.【Javascript的条件语句和函数】
38.【DOM初了解】
39.【DOM的事件了解】
40.【jQuery初了解】
41.【jQuery寻找标签】
42.【jQuery寻找标签2】
43.【jQuery寻找标签(间接寻找)】
44.【案例菜单的切换】
45.【案例只能打开一个菜单】
46.【jQuery 简单操作】
47.【案例动态创建数据】
48.【案例点击获取文本】
49.【案例点击删除文本】
50.【案例表格操作】
51.【案例添加页面】
52.【初识MySQL】
53.【MySQL命令介绍一】
54.【MySQL命令介绍二】
55.【MySQL命令介绍三】
56.【案例：员工管理】
57.【案例 Flask+MySQL新增用户】
58.【案例 Flask+MySQL查询所有用户】
59.【初识 django】
60.【django的快速上手】
61.【django的模板语法】
62.【django的获取请求与响应】
63.【案例用户登录】
64.【django中数据库操作】
65.【django中数据库操作–创建与删除表】
66.【django中数据库操作–操作表中的数据】
67.【案例用户管理】
68.【A 案例：员工管理系统1】
69.【A 案例：员工管理系统2】
70.【A 案例：员工管理系统3】
71.【A 案例：员工管理系统4】
72.【A 案例：员工管理系统5】
73.【A 案例：员工管理系统6】
74.【A 案例：员工管理系统7】
75.【A 案例：员工管理系统8】
76.【A 案例：员工管理系统9】
77.【A 案例：员工管理系统10】
78.【A 案例：员工管理系统11】
79.【A 案例：员工管理系统12】
80.【A 案例：员工管理系统13】
81.【A 案例：员工管理系统14】