Ajax技术使用补充
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
