一、Ajax
通过jquery调用ajax
前端三步，地址，类型，传值
后台一步，success接受调用
$.ajax({
#传递地址
url:'/test_ajax',
# 传递类型
type:'GET',
#传递给后台的数据
data:{user:'root',pwd:'123'},
#成功后从后台返回的数据
success:function (data) {
}
})
二、后台联动
- 入门理解
html 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="user" type="text">
<br>
<input id="pwd" type="text">
<a id="ajax_text">提交</a>
<script src="/static/jquery-1.12.4.js"></script>
<script>
$(function () {
$('#ajax_text').click(function () {
$.ajax({
url:'/test_ajax',
type:'POST',
data:{user:$('#user').val(),pwd:$('#pwd').val()},
success:function(data){
#接收后台返回值
if(data=='ok'){
location.href='http://www.baidu.com'
}else{
alert(data);
}
}
})
})
})
</script>
</body>
</html>
views.py
def test_ajax(request):
if request.method =='POST':
u = request.POST.get('user')
p = request.POST.get('pwd')
if u and p:
#返回给ajax接受的值
return HttpResponse('ok')
else:
return HttpResponse('defeated')
elif request.method =='GET':
return render(request,'ajax_text.html')
- json 理解
创建models.py知识点
1.创建字典例如 ret = {'status':True,'error':None,'data':None}
2.判断条件错误和异常时时给ret['status']，ret['error']分别赋值赋值
3.HttpResponse 只接受字符串，需要用json.dumps转码
def test_ajax(request):
#提前封装好的字典
ret = {'status':True,'error':None,'data':None}
if request.method =='POST':
try:
u = request.POST.get('user')
p = request.POST.get('pwd')
if u and p:
print(u,p)
else:
ret['status'] = False
ret['error'] = '用户名密码错误'
#异常处理
except Exception as e:
ret['status'] = False
ret['error'] = '异常'
#将字典转换成字符串
import json
return HttpResponse(json.dumps(ret))
elif request.method =='GET':
return render(request,'ajax_text.html')
创建html的知识点
1.JSON.parse将字符串转换成字典
html
<input id="user" type="text">
<br>
<input id="pwd" type="text">
<span id="erro_msg"></span>
<a id="ajax_text">提交</a>
<script src="/static/jquery-1.12.4.js"></script>
<script>
$(function () {
$('#ajax_text').click(function () {
$.ajax({
url:'/test_ajax',
type:'POST',
#form $(name).ser
data:{user:$('#user').val(),pwd:$('#pwd').val()},
success:function(data){
var obj = JSON.parse(data)
#通过字典取值
if(obj.status){
location.href='http://www.baidu.com'
}else{
$('#erro_msg').text(obj.error);
}
}
})
})
})
</script>
</body>
jquery，属性隐藏法
$('.edit').click(function () {
$('.backgroud,.update').removeClass('hidden');
#获取当前标签的父类属性
var nid = $(this).parent().attr('nid');
var ip = $(this).parent().attr('ip');
var cid = $(this).parent().attr('cid');
#赋值给当前标签
$('.c').val(cid);
$('.ip').val(ip);
$('.nnid').val(nid);
})
