AJAX

一，AJAX简介

　　AJAX，（Asynchronous Javascript And XML），也就是异步的Javascript和XML。使用JavaScipt语言服务器进行交互。

　　AJAX最大的优点实在不重新加载整个页面的情况下，可以与服务器交换数据并且部分更新网页内容。

　　ps：

　　　　同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求。

　　　　异步交互：客户端发出一个请求后，无需等待服务器响应结束，姐可以发出第二个请求。

二，AJAX基本操作介绍

　　页面输入两个整数，通过AJAX传输到后端计算出结果并返回。

　　test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3">
<button id="b1" class="button">Ajax Test</button>

<script>
    {#生成id是‘b1’的jQuery对象，触发点击事件#}
    $('#b1').click(function () {
        $.ajax({
            {#提交地址，默认是当前后端#}
            url:'',
            {#提交的方式#}
            type:'POST',
            {#提交的数据是id为i1的对象的value值和id为i2的对象的value值#}
            data:{i1:$('#i1').val(),i2:$('#i2').val()},
            {#回调函数，向前端发出指令#}
            success:function (data) {
                $('#i3').val(data)
            }
        })
    })
</script>
</body>
</html>

　　view.py：

def test(request):
    if request.method == 'POST':
        res1 = request.POST.get('i1')
        res2 = request.POST.get('i2')
        res3 = int(res1)+int(res2)
        # 向前端传入参数
        return HttpResponse(res3)
    return render(request,'test.html')

 ps：ajax默认的数据数据的编码给是也是urlencoded。

三，JSON介绍

　　一：JSON指的是JavaScript对象表示法（JavaScript Object Notation）。

　　二：JSON是轻量级文本传输交换格式。

　　三：JSON独立于语言。

　　四：JSON具有自我描述性，更易理解。

　　JSON对象和字符串转换的两个方法：

　　　　方法一：用于将一个JSON字符串转化为JavaScript对象（json只认双引的字符串格式）

JSON.parse('{"name":"Howker"}');

　　　　方法二：用于将JavaScript值转化为JSON字符串。

JSON.stringify({"name":"Tonny"})

四，其他案例

　　ajax传输json格式数据：

　　test.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3">
<button id="b1" class="button">Ajax Test</button>

<script>
    $('#b1').click(function () {
       $.ajax({
           url:'',  // url参数可以不写，默认就是当前页面打开的地址
           type:'post',
           {#告诉django你传入的data数据是什么格式的#}
           contentType:'application/json',
           data:JSON.stringify({'name':'jason','hobby':'study'}),
           success:function (data) {
               alert(data);
               $('#i3').val(data)
           }
            })
             })

</script>
</body>
</html>

　　views.py:

def test(request):
    if request.method == 'POST':
        # 取出json数据格式的方式
        data = request.body
        res = str(data,encoding='utf-8')
        name = json.loads(res).get('name')
        return HttpResponse(name)
    return render(request,'test.html')

 　　ajax传输文件：

　　　　test.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="file" id="i1" name="myfile">
<input type="text" id="'i2">
<button id="b1" class="button">Ajax Test</button>

<script>
    $('#b1').click(function () {
        {#定义要给变量名formdata来存储new FormData对象#}
        let formdata = new FormData();
                   // FormData对象不仅仅可以传文件还可以传普通的键值对
            formdata.append('name','jason');
                    // 获取input框存放的文件
                    //$('#i1')[0].files[0]
            formdata.append('myfile',$('#i1')[0].files[0]); //将jQuery对象转化为js对象
                    $.ajax({
                        url:'',
                        type:'post',
                        data:formdata,
                        // ajax发送文件需要修改两个固定的参数
                        processData:false,  // 告诉浏览器不要处理我的数据
                        contentType:false,  // 不要用任何的编码，就用我formdata自带的编码格式，django能够自动识别改formdata对象
                        // 回调函数
                        success:function (data) {
                            alert(data)
                        }
                    })
                });
</script>
</body>
</html>

　　views.py:

from django.shortcuts import HttpResponse,redirect,render
import json
def test(request):
    if request.method == 'POST':
        # 获取文件对象
        file = request.FILES
        # 获取字符串对象
        res = request.POST
        print(file,'
',res)
        return  HttpResponse('okokok')
    return render(request,'test.html')

 　　总结：

　　　　form表单与ajax异同点：

　　　　　　1，form表单不支持异步提交局部刷新

　　　　　　2，form表单不支持传输json格式数据

　　　　　　3，form表单与ajax默认传输的编码格式都是 urlencoded

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ay742936292/p/11023956.html