Django ajax的简单使用、自定义分页器

1. 前后端传输数据编码格式contentType

　　使用form表单向后端提交数据时，必须将form表单的method由默认的get改为post，如果提交的数据中包含文件，还要将form表单的enctype由默认的"application/x-www-form-urlencoded"修改为"multipart/form-data"。

　　我们可以通过谷歌浏览器-》检查中的Network查看网络请求的详细信息。

　　以form表单为例，其中代码如下（用Bootstrap装饰了一下）：

Django ajax的简单使用、自定义分页器

　　输入用户名密码，然后随便选一个文件点提交：

Django ajax的简单使用、自定义分页器

　　点击view source查看原生数据：

Django ajax的简单使用、自定义分页器

　　随后发现后端能拿到文件，不过只是文件名而已：

Django ajax的简单使用、自定义分页器

　　随后修改将enctype修改为"multipart/form-data"，然后再次提交该文件：

Django ajax的简单使用、自定义分页器

　　此时原生数据中file看不到了，不过后端可以看到request.FILES中收到了真实的文件，使用GET可以拿到对应的文件对象。

2. 小结

　　前后端传输数据编码格式contentType：

　　1. application/x-www-form-urlencoded

对应的数据格式:name=jason&password=666&myfile=test.py
后端获取数据:request.POST

　　2. multipart/form-data

对应的数据格式:name=jason&password=666
后端获取文件格式数据:request.FILES
后端获取普通键值对数据:request.POST

　注意：django会将urlencoded编码的数据解析自动放到request.POST，即使修改了编码格式，只要有其中有普通的键值对，都能通过request.POST取到数据。

二. ajax的简单使用

　　前端朝后端发送请求的方式有四种：

浏览器窗口手动输入网址（get请求）
a标签的href属性（get请求）
form表单（get、post请求，默认是get请求）
ajax（get、post请求）

　　前面三种我们都已经接触过了，接下来来看看第四种ajax。

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互（客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。），传输的数据为XML（当然，传输的数据不只是XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

2.1 ajax的基本语法

　　ajax主要由四个部分组成：

$('#d1').click(function () {
        $.ajax({
            // 提交的地址，不写默认提交至当前页面，同form表单的action
            url:'/index/',
            // 提交的方式
            type:'post',
            // 提交的数据，一般以键值对的形式出现
            data:{'name':'jason','password':'123'},
            // 回调函数
            success:function (data) {  // data接收的就是异步提交返回的结果
                alert(data)
            }
        })
    })

　　　注意：ajax传输数据的默认编码格式也是urlencoded。前后端传输数据时，数据格式与编码要一一对应，比如传输文件就要将编码改为formdata。

2.2 ajax实现前端数字相加

　　假设有三个input框，需求是前两个input框输入数字，点击提交按钮后将结果显示在第三个input中，中途页面不刷新且加法运算要通过后端实现。

　　大致思路如下：

拿到input框中输入的数字
将数字传至后端进行运算
后端将运算的结果返回给前端
前端将结果展示在第三个input框中

　　首先假设用户输入的均为数字，所以我们不做任何检验。然后ajax是异步JavaScript和XML，JQuery内部封装了JavaScript，我们这里使用JQuery的语法来获取input框中输入内容（JQuery_obj.val()），然后使用ajax的回调函数seccess来将加法运算的结果显示在第三个input框中（JQuery_obj.val(result)）。

　　代码如下（前端未做任何装饰，可能有点丑）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<input type="text" id="s1">+<input type="text" id="s2">=<input type="text" id="s3">
<button id="b1">提交</button>

<script>
    $('#b1').on('click', function () {
        $.ajax({
            url: '/test1/', //不写默认提交至当前页面
            type: 'post',
            data:{'s1':$('#s1').val(),'s2':$('#s2').val()},
            success:function (data) {
                $('#s3').val(data)
            }
        })
    })
</script>
</body>
</html>

html代码