一、Ajax操作流程
1、基本介绍
对话框添加，删除，修改
添加：
Ajax偷偷向后台发请求：
1、下载引入jQuery
2、Ajax
$.ajax({ url: "/add_classes.html", type: "POST", data: {"username":"root","password":"123"} success: function(arg){ //回调函数，arg是服务端返回的数据 }
})
2、Ajax.py文件
from django.shortcuts import render,redirect,HttpResponse
def ajax1(request):
return render(request,"ajax1.html")
def ajax2(request):
user = request.POST.get("username")
pwd = request.POST.get("password")
import time
time.sleep(5)
return HttpResponse("我愿意")
def ajax3(request):
v1 = request.GET.get("v1")
v2 = request.GET.get("v2")
try:
v3 = int(v1) + int(v2)
except Exception as e:
v3 = "输入格式有误"
print(v3)
return HttpResponse(v3)
2、Ajax.html文件操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.btn{
display: inline-block;
padding: 5px 15px;
background: darkgoldenrod;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<input type="text" placeholder="用户名" id="username" >
<input type="password" placeholder="密码" id="password" >
<div class="btn" onclick="submitForm();">提交</div>
</div>
<div>
<input type="text" placeholder="数字" id="i1" >
+
<input type="text" placeholder="数字" id="i2" >
<div class="btn" onclick="addForm();">等于</div>
<input type="text" placeholder="和" id="i3" >
</div>
<script src="/static/jquery-3.1.1.js" ></script>
<script>
function submitForm() {
var u = $('#username').val();
var p = $('#password').val();
console.log(u,p);
$.ajax({
url: "/ajax2.html",
type: "POST",
data: {username:u, password:p}, {# js里字典可以不加引号 #}
success: function (arg) {
console.log(arg);
}
})
}
function addForm() {
var v1 = $('#i1').val();
var v2 = $('#i2').val();
$.ajax({
url: "/ajax3.html",
type: "GET",
data: {v1:v1, v2:v2},
success: function (arg) {
console.log(arg);
$('#i3').val(arg);
// JS主动刷新页面
// window.location.reload();
}
})
}
</script>
</body>
</html>
三、用Ajax删除学员
ajax.html操作
<script src="/static/jquery-3.1.1.js" ></script>
<script>
//removeStudent参数前后需不一致
function removeStudent(ths) {
var nid = $(ths).parent().parent().attr("nid");
$.ajax({
url: "/ajax4.html",
type: "GET",
data: {nid:nid},
success: function (arg) {
if (arg == "成功") {
//window.location.reload();
$(ths).parent().parent().remove();
}else{
alert(arg);
}
}
})
}
</script>
ajax.py操作
from app01 import models
def ajax4(request):
nid = request.GET.get("nid")
msg = "成功"
try:
models.Students.objects.filter(id=nid).delete()
except Exception as e:
msg = str(e)
return HttpResponse(msg)