1、python和js之间json数据转换关系
2、AJAX的引入
自己根据上面程序封装写的包(js文件格式)
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !=='')
{
var cookies = document.cookie.split(';');
for (var i = 0;i < cookies.length;i++)
{
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0,name.length + 1) === (name + '='))
{
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend:function (xhr,settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader('X-CSRFToken',csrftoken);
}
}
});
原始方法
Ajax的方法
若数据中含有列表等多层数据需要traditional:True
几个示例:
HTML:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test</title>
{% load static %}
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'sweetalert/sweetalert.css' %}">
<link rel="stylesheet" href="{% static 'font-awesome.css' %}">
<style>
.sweet-alert>h2{
padding-top: 20px;
}
</style>
</head>
<body>
{#数学运算#}
<p>
<input type="text" id="i1">+
<input type="text" id="i2">=
<input type="text" id="i3">
</p>
<input type="button" id="b1" value="提交">
{#删除弹出提示#}
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
<button class="btn btn-danger del">删除</button>
</div>
</div>
{#登陆验证,光标移走弹出提示#}
<p>
<input type="text" id="i4">
<span id="erro"></span>
</p>
<script src="{% static 'sweetalert/sweetalert.min.js' %}"></script>
<script src="{% static 'jquery-3.2.1.min.js' %}"></script>
JS文件:
1、计算器:
py代码:
def index(request):
i1 = int(request.GET.get('i1'))
i2 = int(request.GET.get('i2'))
return HttpResponse(i1+i2)
JS代码:
$("#b1").on("click",function () {
var i1 = $('#i1').val();
var i2 = $('#i2').val();
$.ajax({
url:"/index/",
type:'get',
data:{'i1':i1,'i2':i2},
success:function (arg) {
$('#i3').val(arg);
跳转
location.href = 'http://www.baidu.com';
查看数据类型
console.log(typeof arg)
}
})
})
2、反序列化数据
py代码:
from django.core import serializers
def xulie(request):
ret = models.Book.objects.all()
# 将ret转换成json数据格式
s = serializers.serialize("json",ret)
return HttpResponse(s)
JS代码:
$("#b1").on("click",function () {
$.ajax({
url:"/index/",
type:"get",
dataType:"json",
data:{"name":"李","age":11,"data":JSON.stringify([1,2,3])},
success:function (arg) {
{#反序列化数据#}
var data = JSON.parse(arg);
if(data.status === 0) {
{#请求成功#}
alert(data.data);
}
else {
{#请求失败#}
alert(data.error);
}
}
});
});
3、删除弹出提示框
JS代码:
扫描二维码关注公众号,回复:
5551224 查看本文章
$(".del").on('click',function () {
swal({title:'标题',
text:'内容',
type:'success',
showCancelButton: true,
confirmButtonClass:'btn-danger',
confirmButtonText:'确认',
cancelButtonText: '取消',
closeOnConfirm: false
});
});
4、登陆验证,光标移走弹出提示
py代码:
def logincheck(request):
if request.method == 'POST':
name = request.POST.get('name')
print(name)
ret = models.UserInfo.objects.filter(name=name)
print(ret)
if ret:
msg = '用户已存在'
else:
msg = '用户可用'
return HttpResponse(msg)
JS代码:
$('#i4').blur(function () {
var $this = $(this);
var input_date = $this.val();
console.log(input_date);
{#去掉input框后边的内容#}
$('#erro').text('');
$.ajax({
url:"/logincheck/",
type:'POST',
data:{'name':input_date},
success:function (arg) {
{#创建一个span标签#}
var spanEle = document.createElement('span');
spanEle.innerText = arg;
$(spanEle).css("color","red");
{#将span添加到输入框后边#}
$this.after(spanEle);
console.log(arg);
$('#erro').text(arg);
}
})
})