django框架|django框架——ajax django|ajax|python|web框架

系列文章目录第一章 django安装与介绍
第二章 django基础使用
第三章路由层
第四章虚拟环境、django版本区别、视图层
第五章模板层
【django框架|django框架——ajax】第六章模型层（上）
第七章模型层（下）
第八章 ajax

文章目录

系列文章目录
一.ajax简介
- ajax使用
二、前后端传输数据编码格式
三、ajax发送json格式数据
四、ajax携带文件数据
五、回调机制

一.ajax简介页面不刷新的情况下可以与后端进行数据交互实现异步提交以及局部刷新
ajax不是一门全新知识本质就是一些js代码我们学习ajax直接使用jQuery封装之后的版本(语法更加简单) 使用ajax的前提必须要引入jQuery文件
ajax使用

$('#btn').click(function () { // 获取两个框里面的数据 let i1Val = $('#i1').val(); let i2Val = $('#i2').val(); // 发送ajax请求传输数据 $.ajax({ url:'',// 不写默认就是当前页面所在的地址 type:'post', // 指定当前请求方式 data:{'i1':i1Val,'i2':i2Val},// 请求携带的数据 success:function (args) {// 异步回调函数后端有回复自动触发 $('#i3').val(args) } }) })

二、前后端传输数据编码格式 form表单默认发送的编码格式：
Content-Type: application/x-www-form-urlencoded
数据格式:username=jason&password=123
django后端会自动处理到:request.POST
form表单发送文件：
Content-Type: multipart/form-data
数据格式:隐藏不让看
django后端会自动处理:request.POST request.FILES
ajax默认的编码格式：
Content-Type: application/x-www-form-urlencoded
数据格式:username=jason&password=123
django后端会自动处理到:request.POST
三、ajax发送json格式数据 ajax发送的数据类型一定要跟数据的编码格式一致
编码格式是urlencoded
数据格式就应该是username=jason&password=123
但是你却发送了json格式数据
django后端获取json格式的数据不会做任何的处理就在request.body内
需要我们自行处理

$('#d1').click(function () { $.ajax({ url:'', type:'post',// 不写默认也是get请求 contentType:'application/json',// 不写默认是urlencoded编码 data:JSON.stringify({'name':'jason','pwd':123}),// 序列化方法 success:function (args) { } }) })

四、ajax携带文件数据

$("#d1").click(function () { // 需要利用内置js内置对象FormData let myFormData = https://www.it610.com/article/new FormData(); // 对象添加普通数据 myFormData.append('username',$('#name').val()) myFormData.append('password',$('#pwd').val()) // 对象添加文件数据 myFormData.append('my_file',$('#file')[0].files[0]) // 发送ajax请求 $.ajax({ url:'', type:'post', data:myFormData, // 携带文件必须要指定的两个参数 contentType:false, processData:false, success:function (args) { // 处理异步回调返回的结果 } }) })

五、回调机制使用ajax交互所有的操作都不再直接影响整个页面(局部操作)
需要在success回调函数中完成我们需要的后续操作