Ajax技术使用补充

发布时间：2020-12-16 02:57:44 所属栏目：百科来源：网络整理

导读：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技术使用补充

一、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/",data:{‘list‘:v},traditional:true,success:function(arg){
                console.log(arg);
            }
        })

发送字典

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

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

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

关键参数解析：

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

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

list： [1,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/",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　

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!