Ajax技术使用补充

Ajax技术使用补充

 

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

发送字符串或数字

?
1
2
3
4
5
6
7
8
$.ajax({
           url:"/ajax_test.html/",
           type:'POST',
           data:{'v1':1,'v2':2},<br>　　　　　　　dataType:'JSON',
           success:function(arg){
               console.log(arg);
           }
       })

 

发送数组

v=[1,2,3,4]

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

?
1
2
3
4
5
6
7
8
9
$.ajax({
           url:"/ajax_test.html/",
           type:'POST',
           data:{'list':v},<br>　　　　　　　dataType:'JSON',
           traditional:true,
           success:function(arg){
               console.log(arg);
           }
       })

　

发送字典

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

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

?
1
2
3
4
5
6
7
8
9
$.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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!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>

　　

视图函数：

?
1
2
3
4
def ajax_test(request):
    value=request.POST.getlist('list')
    print(value)
    return render(request,"ajax_test.html")

　

选择1，2，3　

 

posted @   -零  阅读(219)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手