Django之学员管理三
web框架的本质：
本质是客户端和服务端的交互。用socket实现。
socket客户端（浏览器）
2、发送ip和端口，http://www.baidu.com：80/index/ (http://www.baidu.com：80) 为ip和端口，（/index/ ）是url。客户端往服务端发送请求时，是要分post和get两种请求方式。
4、接受响应，普通的响应就是正常的拿到响应体浏览器是处理呈现，而重定向是要再发一次http请求，进行一次跳转才可以。
socket服务端（服务器）
1、服务端socket先运行起来进行监听 while循环来持续监听ip和端口，等待客户连接。
3、接受请求，处理并返回相应的结果，返回的本质是一堆字符串。返回的有响应头和响应体。还有一种响应方式，是重定向返回，在重定向返回里是没有响应体的，只有响应头。在响应头里有一区别是多了一个location，在location里定义要响应跳转的url。
django的web框架：
a、创建project：django-admin startproject mysite
b、配置：模板，静态文件，csrf
c、路由关系：url-》函数
d、视图函数：
def index(request):
获取的：request.method
request.POST
request.GET
返回的：return redirect("url")
return render(request, "模板路径", { } )
return HttpResponse("字符串")
e、模板渲染：{% for %} 和 {% if %}
Ajax的本质流程：
基于jQuery实现的ajax，
$.ajax({
url:"",
type:"",
data:{k1:"v1"},
success:function(arg){
}
})
小知识点：在onclick的前面加一个href的url，是先执行onclick的事件，在跳转到href的url。但是如何在ajax里的对应事件执行完，返回return False，那么在href里的url就不在执行啦。这个方法用在form表单中。
对班级表实现ajax方式的编辑删除操作（对话框的单表的编辑操作）：
注意点：一定要注意前后端的标签id是否一致，和$(#' ') 里面要拿取的标签id前的#符号，否则会找不到值，并且前端不会有报错。
前端操作代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>classes</title>
<style>
.hide{
display: none;
}
.shadow{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.4;
z-index: 999;
}
.modal{
z-index: 1000;
position: fixed;
left: 50%;
top: 50%;
height: 300px;
width: 400px;
background-color: white;
margin-left: -200px;
margin-top: -150px;
}
</style>
</head>
<body>
<h1>classes_list</h1>
<div>
<a href="/add_class/">添加</a>
|
<a οnclick="showModal();">对话框添加</a>
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>班级名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for item in class_lsit %}
<tr>
<td>{{ item.nid }}</td>
<td>{{ item.title }}</td>
<td>
<a href="/del_class/?nid={{ item.nid }}">删除</a>
|
<a οnclick="modelEdit(this);">对话框编辑</a>
|
<a href="/edit_class/?nid={{ item.nid }}">编辑</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div id="shadow" class="shadow hide"></div>
<div id="modal" class="modal hide">
<p>添加班级：<input id="title" type="text" name="title" placeholder="班级名称"></p>
<input type="button" value="submit" οnclick="AjaxSend();"/>
<input type="button" value="cancel" οnclick="cancleModal();"/><span id="errormsg"></span>
</div>
<div id="editModel" class="modal hide">
<h3>编辑框</h3>
<p>
<input id="editId" type="text" name="nid" style="display: none" />
<input id="editTitle" type="text" name="title" />
</p>
<input type="button" value="submit" οnclick="editAjaxSend();" /><span id="errormsg"></span>
<input type="button" value="cancel" οnclick="cancleModal();" />
</div>
<script src="/static/jquery-1.12.4.js"></script>
<script>
function showModal() {
document.getElementById("shadow").classList.remove("hide"); //找到遮罩层，并去挑遮罩层
document.getElementById("modal").classList.remove("hide");
}
function cancleModal() {
document.getElementById('shadow').classList.add('hide');
document.getElementById('modal').classList.add('hide');
document.getElementById('editModel').classList.add('hide');
}
function AjaxSend(){
$.ajax({
url:'/modal_add_classes_ajax/', //往哪里提交
type:'POST', //以什么方式提交
data:{"title":$("#title").val()}, //拿到全段输入的值
success:function (data) {
//当服务端处理完成后，返回数据时，该函数自动调用
//data是服务端返回的值
console.log(data);
if(data=="ok"){
location.href='/classes/'; //指定提交成功后跳转到哪里
}else {
$('#errormsg').text(data);
}
}
})
}
function modelEdit(ths) {
document.getElementById("shadow").classList.remove("hide"); //找到遮罩层，并去挑遮罩层
document.getElementById("editModel").classList.remove("hide");
/*
1、获取当前点击标签
2、获取当前标签的父标签，再找其上方标签
3、获取当前行班级名称，赋值到编辑对话框中
*/
var row = $(ths).parent().prevAll() //$(ths)是获取当前标签。 .parent是当前父标签。 .prevAll是当前级标签的上面所有的标签。
console.log(row);
var content = $(row[0]).text(); //用列表取值的方式获取title。 .text是转成文本信息。
$('#editTitle').val(content); //找到title给他赋值给val里。
var contentId = $(row[1]).text();
$('#editId').val(contentId);
}
function editAjaxSend() {
var nid = $('#editId').val(); //提交操作里前端获取id
var content = $('#editTitle').val(); // 提交操作，前端获取新输入的值
console.log(nid,content);
$.ajax({
url:'/modal_edit_classes_ajax/',
type:"POST",
data:{"nid":nid,"content":content},
success:function (arg) {
// arg字符串类型
// JSON.parse(字符串) => 对象
// JSON.stringify(对象) => 字符串
arg = JSON.parse(arg);
if(arg.status){
//location.href="/classes/" //这个是跳转
location.reload(); //这个是刷新
}else{
alert(arg.message);
}
}
})
}
</script>
</body>
</html>
views.py 的对应函数：
def modal_edit_classes_ajax(request):
ret = {"status":True,"message":None} #当try代码块出现问题，可以用这种方式收集错误信息
try:
nid = request.POST.get("nid") # 拿id
print(nid)
content = request.POST.get("content") #拿内容
print(content)
sqlheper.modify("update classes set title=%s where nid=%s",[content,nid,])
print("1")
except Exception as e:
ret['status'] = False
ret['message'] = "处理异常"
# ret['message'] = str(e) #异常对象的内容，用字符串的形式拿到。
return HttpResponse(json.dumps(ret)) #用json.dumps的方法使的json将数据转成字符串，在发给前端
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
