Django-website 程序案例系列-6 ajax案例
普通ajax案例：
views.py
def testajax(request):
h = request.POST.get('hostname') #拿到ajax传来的值
i = request.POST.get('ip')
p = request.POST.get('port')
b = request.POST.get('b_id')
if h and len(h) < 5: #如果为空和长度小于5
models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b) #存入主机表信息
return HttpResponse('OK') #存入成功返回‘OK’
else:
return HttpResponse('fail') #不成功返回‘fail’
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.shade{
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: black;
opacity: 0.6;
z-index: 100;
}
.add-modal{
position: fixed;
height: 300px;
width: 400px;
top: 100px;
left: 50%;
z-index: 101;
border: 1px solid black;
background: white;
margin-left: -200px;
}
</style>
</head>
<body>
<h1>主机信息</h1>
<div>
<input type="button" id="add_host" value="添加"/>
</div>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>主机名</th>
<th>IP</th>
<th>端口</th>
<th>业务线ID</th>
<th>业务线名称</th>
</tr>
</thead>
<tbody>
{% for row in v1 %}
<tr host-id="{{ row.id }}" bid="{{ row.b_id }}">
<td>{{ forloop.counter }}</td>
<td>{{ row.hostname }}</td>
<td>{{ row.ip }}</td>
<td>{{ row.port }}</td>
<td>{{ row.b_id }}</td>
<td>{{ row.b.caption }}</td>
</tr>
{% endfor %}
</tbody>
</table> <div class="shade hide"></div>
<div class="add-modal hide">
<form action="/host" method="POST">
<div class="group">
<input type="text" id="host" placeholder="主机名" name="hostname"/>
</div>
<div class="group">
<input type="text" id="ip" placeholder="IP" name="ip"/>
</div>
<div class="group">
<input type="text" id="port" placeholder="端口" name="port"/>
</div>
<div class="group">
<select id="sel" name="b_id">
{% for op in b_list %}
<option value="{{ op.id }}">{{ op.caption }}</option>
{% endfor %}
</select>
</div>
<input type="submit" value="提交"/>
<input type="button" id="cancel" value="取消"/>
</form>
# ajax提交按钮，id为ajax_submit在JS中进行判断
<input type="button" value="ajaxtijiao" id="ajax_submit" style="display: inline-block;padding: 5px;background: blue;color: black;"/>
</div>
<script src="static/js/jquery.min.js"></script>
<script>
$(function() {
$('#add_host').click(function(){
$('.shade,.add-modal').removeClass('hide');
});
$('#cancel').click(function(){
$('.shade,.add-modal').addClass('hide');
});
})
$('#ajax_submit').click(function(){ #判断标签‘ajax_submit’的ajax提交事件
$.ajax({
url: "/testajax", #提交的url
type: "POST", #提交方式 POST|GET
data: {'hostname': $('#host').val(), 'ip': $('#ip').val(), 'port': $('#port').val(),'b_id': $('#sel').val()}, #提交的数据
success: function(data) { #返回的函数
if(data == "OK"){ #如果返回OK
location.reload(); #重新加载本网页（刷新）
}else{
alert(data); #不然返回一个弹出框
}
}
})
}) </script>
</body>
</html>
ajax回传json数据：
views.py
def testajax(request):
import json #导入json包
ret = {'status': True, 'error': None, 'data': None} #json格式的字符串序列
try: #使用try来捕获错误
h = request.POST.get('hostname')
i = request.POST.get('ip')
p = request.POST.get('port')
b = request.POST.get('b_id')
if h and len(h) > 5:
models.Host.objects.create(
hostname=h,
ip=i,
port=p,
b_id=b)
else:
ret['status'] = False #往字符串中写入错误字段
ret['error'] = "太短了"
except Exception as e: #报错字段
ret['status'] = False #往字符串中写入错误字段
ret['error'] = "请求错误"
return HttpResponse(json.dumps(ret)) #使用json工具把json格式转换成为字符串
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.shade{
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: black;
opacity: 0.6;
z-index: 100;
}
.add-modal{
position: fixed;
height: 300px;
width: 400px;
top: 100px;
left: 50%;
z-index: 101;
border: 1px solid black;
background: white;
margin-left: -200px;
}
</style>
</head>
<body>
<h1>主机信息</h1>
<div>
<input type="button" id="add_host" value="添加"/>
</div>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>主机名</th>
<th>IP</th>
<th>端口</th>
<th>业务线ID</th>
<th>业务线名称</th>
</tr>
</thead>
<tbody>
{% for row in v1 %}
<tr host-id="{{ row.id }}" bid="{{ row.b_id }}">
<td>{{ forloop.counter }}</td>
<td>{{ row.hostname }}</td>
<td>{{ row.ip }}</td>
<td>{{ row.port }}</td>
<td>{{ row.b_id }}</td>
<td>{{ row.b.caption }}</td>
</tr>
{% endfor %}
</tbody>
</table> <div class="shade hide"></div>
<div class="add-modal hide">
<form action="/host" method="POST">
<div class="group">
<input type="text" id="host" placeholder="主机名" name="hostname"/>
</div>
<div class="group">
<input type="text" id="ip" placeholder="IP" name="ip"/>
</div>
<div class="group">
<input type="text" id="port" placeholder="端口" name="port"/>
</div>
<div class="group">
<select id="sel" name="b_id">
{% for op in b_list %}
<option value="{{ op.id }}">{{ op.caption }}</option>
{% endfor %}
</select>
</div>
<input type="submit" value="提交"/>
<input type="button" id="cancel" value="取消"/>
</form>
<input type="button" value="ajaxtijiao" id="ajax_submit"
style="display: inline-block;padding: 5px;background: blue;color: black;"/>
<span id="error_msg" style="color: red"></span>
</div>
<script src="static/js/jquery.min.js"></script>
<script>
$(function() {
$('#add_host').click(function(){
$('.shade,.add-modal').removeClass('hide');
});
$('#cancel').click(function(){
$('.shade,.add-modal').addClass('hide');
});
})
$('#ajax_submit').click(function(){
$.ajax({
url: "/testajax",
type: "POST",
data: {'hostname': $('#host').val(), 'ip': $('#ip').val(), 'port': $('#port').val(),
'b_id': $('#sel').val()},
success: function(data) {
# console.log(data); #获得回传数据，在console中打印出来
var obj = JSON.parse(data); #将字符串转换成为json格式 JSON.stringify():将json格式转换成为字符串
if(obj.status){ #取出json中status字段
location.reload();
}else{
$('#error_msg').text(obj.error); #取出 error字段并打印在标签‘error_msg’中
}
}
})
}) </script>
</body>
</html>
打印结果：
传递过来的json字符串，console打印出来了
使用ajax时最好使用 HttpResponse(json.dumps(data))返回一个字符串使用前端JSON.parse转换成为json格式在调用
不要使用render和redirect返回数据
案例：
$.ajax({
data: $('#edit_form').serialize()； #实现一句话提交数据，不用再写很多的对应关系
})
Django-website 程序案例系列-6 ajax案例的更多相关文章
- js调用ajax案例
js调用ajax案例 测试地址:http://www.w3school.com.cn/tiy/t.asp?f=ajax_get 嵌入下面代码,点击提交,再点击请求数据.就可以看到结果了. <ht ...
- ajax案例_校验用户名
目录 ajax案例_校验用户名 代码下载 需求 流程 搭建环境 开发代码 1_jsp 1_servlet 1_service.dao 2_servlet 2_jsp 测试后,功能实现,完结撒花 aja ...
- 性能分析（2）- 应用程序 CPU 使用率过高案例
性能分析小案例系列,可以通过下面链接查看哦 https://www.cnblogs.com/poloyy/category/1814570.html 系统架构背景 其中一台用作 Web 服务器,来模拟 ...
- Spark RDD/Core 编程 API入门系列 之rdd案例（map、filter、flatMap、groupByKey、reduceByKey、join、cogroupy等）（四）
声明: 大数据中,最重要的算子操作是:join !!! 典型的transformation和action val nums = sc.parallelize(1 to 10) //根据集合创建RDD ...
- Django学习 之后端视图与ajax
一.Ajax简介 在此之前你一定需要先学习下JavaScript JSON 可见: 前端学习 之 JavaScript 之 JSON 1.简单介绍 我们以前知道的前端向后端发送数据的方式有: GET: ...
- ASP.NET4.5Web API及非同步程序开发系列
ASP.NET4.5Web API及非同步程序开发系列 认识ASP.NET WEB API 他的前身为WCF WEB API用于协助WCF支持RestFul.现在集成进ASP.NET,正式更名为ASP ...
- Java基础:String类详解,案例用户登录实现,案例手机号截取实现,案例敏感词替换实现;StringBuilder类详解,StringBuilder和String相互转换,附练习案例.
1.API 1.1 API概述-帮助文档的使用 什么是API API (Application Programming Interface) :应用程序编程接口 java中的API 指的就是 JDK ...
- 【微信小程序开发•系列文章六】生命周期和路由
这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...
- [Python] 利用Django进行Web开发系列（二）
1 编写第一个静态页面——Hello world页面 在上一篇博客<[Python] 利用Django进行Web开发系列(一)>中,我们创建了自己的目录mysite. Step1:创建视图 ...
随机推荐
- 用statefulSet 部署持久化的OA（Tomcat）
1.部署多个副本的OA(Tomcat)集群,其中一个Tomcat的需要加一个定时器,其他代码跟其他的Tomcat的代码一样.需要重启后也还是保持这个状态.代码如下: apiVersion: v1 ki ...
- linux内存源码分析 - 页表的初始化
本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 本文章中系统我们假设为x86下的32位系统,暂且不分析64位系统的页表结构. linux分页 linux下采用四 ...
- JAVA实现用户的权限管理
一:写在前面 前两天有个同学问我,那个系统不同的用户登陆不同的页面不同,要写很多个页面啊!而每个用户的在系统中拥有不同的权限,可以访问不同的页面是怎么实现的??那低权限的在浏览器输入高权限的人的url ...
- Luogu2612 ZJOI2012 波浪 DP
传送门 花掉了自己用来搞学科的时间做了这道题-- 一道类似的题:Here 考虑拆开绝对值计算贡献.那么我们对于\(1\)到\(N\)的排列,从小到大地将插入它们插入排列中. 假设我们现在计算到了数\( ...
- WPF Blend 脑洞大开的问题：如何用Blend得到或画出一个凹槽、曲面。
原文:WPF Blend 脑洞大开的问题:如何用Blend得到或画出一个凹槽.曲面. 目标图: 步骤一(放置一个矩形,填充蓝色): 步骤二(复制该矩形,并调整边角,填充粉红色): 第三部:让图形部分重 ...
- 在VS2017上使用C#调用非托管C++生成的DLL文件（图文讲解）
原文:在VS2010上使用C#调用非托管C++生成的DLL文件(图文讲解) 背景 在项目过程中,有时候你需要调用非C#编写的DLL文件,尤其在使用一些第三方通讯组件的时候,通过C#来开发应用软件时,就 ...
- Luogu P1265 公路修建
一眼看去,就是一道MST的模板题. 然后果断准备跑Kruskal,然后5个TLE. Kruskal复杂度对于这个完全图要O(n^2*logn^2),快排就会导致超时. 然后打了刚学的Prim.朴素O( ...
- [linux]查询多个 trace 文件中，包含特定内容的文件
例如 目录是 /home/oracle/abc/trace 命令如下:oracle@node1 trace]$ find ./ -name "*.trc" | xargs grep ...
- libgdx学习记录26——Polygon多边形碰撞检测
libgdx中Math封装了Polygon这个类,它是由多个定点进行描述实现的,在进行物体间的碰撞时,物体轮廓有时候是不规则的,这时候可以用一个多边形勾勒出其大概的轮廓,对其进行模拟. Polygon ...
- LeetCode之Add Two Numbers
Add Two Numbers 方法一: 考虑到有进位的问题,首先想到的思路是: 先分位求总和得到 totalsum,然后再将totalsum按位拆分转成链表: ListNode* addTwoNum ...