Ajax技术使用补充

一、Ajax发送数据的几种形式

发送字符串或数字

 $.ajax({
            url:"/ajax_test.html/",
            type:'POST',
            data:{'v1':1,'v2':2},
　　　　　　　dataType:'JSON',
            success:function(arg){
                console.log(arg);
            }
        })

发送数组

v=[1,2,3,4]

加上traditional参数，可以发送数组，经常用在多选框。

 $.ajax({
            url:"/ajax_test.html/",
            type:'POST',
            data:{'list':v},
　　　　　　　dataType:'JSON',
            traditional:true,
            success:function(arg){
                console.log(arg);
            }
        })

发送字典

dict={'k1':1,'k2':2}

将字典转为字符串串进行发送

 $.ajax({
            url:"/ajax_test.html/",
            type:'POST',
            data:{'dict':JSON.stringify(dict)},
　　　　　　　dataType:'JSON',
            success:function(arg){
                console.log(arg);
            }
        })

关键参数解析：

dataType:'JSON'：服务端返回序列化的数据时，ajax自动进行反序列化。

traditional：我们可以通过设置traditional 为true阻止深度序列化，然后序列化结果如下：

list： [1,2,3,4] => list：list=1&list=2&list=3&list=4

二、示例

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {%load staticfiles%}
    <script src="{% static '/js/jquery/jquery-3.3.1.js' %}"></script>
    <title>Title</title>
</head>
<body>
<select id="Click" multiple>
    <option value="老师1">1</option>
    <option value="老师2">2</option>
    <option value="老师3">3</option>
    <option value="老师4">4</option>
</select>
    <br>
    <input type="submit" id="Btntest">
<script>
     $(function(){
        bindEvent();
    });
    <!--#绑定函数-->
    function bindEvent(){
        $('#Btntest').click(function(){
            var v=$('#Click').val();
            console.log(v)

            $.ajax({
            url:"/ajax_test.html/",
            type:'POST',
            data:{'list':v},
            traditional:true,
            success:function(arg){
                console.log(arg);
            }
        })

        }
        )}


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

视图函数：

def ajax_test(request):
    value=request.POST.getlist('list')
    print(value)
    return render(request,"ajax_test.html")

选择1，2，3　