Ajax技术使用补充
@H_404_7@ @H_502_8@一、Ajax发送数据的几种形式
发送字符串或数字@H_404_7@
$.ajax({
url:"/ajax_test.html/",type:‘POST‘,data:{‘v1‘:1,‘v2‘:2},
dataType:‘JSON‘,success:function(arg){
console.log(arg);
}
})
@H_404_7@
发送数组@H_404_7@
v=[1,2,3,4]@H_404_7@
加上Traditional参数，可以发送数组，经常用在多选框。@H_404_7@
$.ajax({
url:"/ajax_test.html/",data:{‘list‘:v},Traditional:true,success:function(arg){
console.log(arg);
}
})
@H_404_7@
发送字典@H_404_7@
dict={‘k1‘:1,‘k2‘:2}@H_404_7@
将字典转为字符串串进行发送@H_404_7@
$.ajax({
url:"/ajax_test.html/",data:{‘dict‘:JSON.stringify(dict)}, dataType:‘JSON‘,success:function(arg){
console.log(arg);
}
})
@H_404_7@
关键参数解析：@H_404_7@
dataType:‘JSON‘：服务端返回序列化的数据时，ajax自动进行反序列化。@H_404_7@
Traditional：我们可以通过设置Traditional 为true阻止深度序列化，然后序列化结果如下：@H_404_7@
list： [1,4] => list：list=1&list=2&list=3&list=4@H_404_7@
@H_404_7@
@H_404_7@
@H_404_7@
二、示例
HTML@H_404_7@
<!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>
@H_404_7@
def ajax_test(request):
value=request.POST.getlist(‘list‘)
print(value)
return render(request,"ajax_test.html")
@H_404_7@
选择1，2，3 @H_404_7@
@H_
@H_版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
