Django - Ajax初识
当需要在弹出的对话框中，做判断操作时，需要用到ajax
1、host.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.shade{
top:0;
left:0;
right:0;
bottom:0;
background:black;
z-index: 100;
position: fixed;
opacity: 0.3;
}
.add-modle{
position: fixed;
height: 300px;
width: 400px;
top:100px;
left: 50%;
z-index: 101;
background: white;
margin-left: -200px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<h1>主机列表</h1>
<div>
<input id="add_host" type="text" value="添加">
</div> <table border="1">
<thead>
<tr>
<th>主机ID</th>
<th>主机名</th>
<th>主机IP</th>
<th>主机Port</th>
<th>业务线</th>
</tr>
</thead>
<tbody> {% for row in v %}
<tr host-id="{{ row.nid }}" cap-id="{{ row.b.id }}">
<td>{{ forloop.counter}}</td>
<td>{{ row.hostname }}</td>
<td>{{ row.ip }}</td>
<td>{{ row.port }}</td>
<td>{{ row.b.caption }}</td>
</tr>
{% endfor %}
</tbody> </table>
<table border="1">
<thead>
<tr>
<th>主机名</th>
<th>主机IP</th>
<th>主机Port</th>
<th>业务线</th>
</tr>
</thead>
<tbody> {% for row in v2 %}
<tr host-id="{{ row.nid }}" cap-id="{{ row.b.id }}">
<td>{{ row.hostname }}</td>
<td>{{ row.ip }}</td>
<td>{{ row.port }}</td>
<td>{{ row.b__caption }}</td>
</tr>
{% endfor %}
</tbody> </table>
<div class="shade hide" ></div>
<form method="post" action="/app01/host">
<div class="add-modle hide">
<div class="group">
<input id="host" type="text" placeholder="主机名" name="hostname">
</div>
<div class="group">
<input id="ip" type="text" placeholder="IP" name="ip">
</div>
<div class="group">
<input id="port" type="text" placeholder="端口" name="port">
</div>
<div class="group">
<select id="select" name="b_id">
{% for rp in b_list %}
<option value="{{ rp.id }}">{{ rp.caption }}</option>
{% endfor %} </select>
</div>
<div class="group">
<input type="submit" value="提交" >
<a id="ajax_sub" style="display: inline-block;padding: 5px;background: blue;color: white">默默提交</a>
<input type="button" value="取消">
</div>
</div>
</form>
<script src="/static/jquery.min.js"></script>
<script>
$(function () {
$("#add_host").click(function () {
$(".shade,.add-modle").removeClass("hide")
});
$("#ajax_sub").click(function () {
$.ajax({
url:'/app01/ajax_text',
type:"POST",
data:{
'hostname':$('#host').val(),
'ip':$("#ip").val(),
'port':$("#port").val(),
"b_id":$("#select").val() },
success:function (data) {
if (data=="ok"){
location.reload()
}
else {
alert(data)
} }
})
}) }) </script>
</body>
</html> 2、在urls.py中，增加url和函数对应关系
3、在views.py中，增加函数获取前端值及写入数据库
Django - Ajax初识的更多相关文章
- django ajax 及批量插入数据 分页器
``` Ajax 前端朝后端发送请求都有哪些方式 a标签href GET请求 浏览器输入url GET请求 form表单 GET/POST请求 Ajax GET/POST请求 前端朝后端发送数据的编码 ...
- Django ajax的简单使用、自定义分页器
一. ajax初识 1. 前后端传输数据编码格式contentType 使用form表单向后端提交数据时,必须将form表单的method由默认的get改为post,如果提交的数据中包含文件,还要将f ...
- Django ajax MYSQL Highcharts<1>
Another small project with django/Ajax/Mysql/Highcharts. 看下效果图 - delivery dashboard .嘿嘿 是不是还蛮好看的. 废 ...
- django ajax练习
这几天遇到了django ajax请求出错的问题,总结一下 前端js:我这里创建的是一个字典格式的数据,前端js收到字典之后也是要用字典的形式去解包后台传送过来的数据,比如我下面的写法:data['s ...
- 关于Django Ajax CSRF 认证
CSRF(Cross-site request forgery跨站请求伪造,也被称为“one click attack”或者session riding,通常缩写为CSRF或者XSRF,是一种对网站的 ...
- day059 ajax初识 登录认证练习
ajax初识 ajax有两个特点: 一个是异步,另一个是浏览器页面局部刷新(这个特点是用户感受不到的时候进行的) 示例: 页面输入两个整数,通过AJAX传输到后端计算结果并返回 在HTML文件中: & ...
- django ajax增 删 改 查
具于django ajax实现增 删 改 查功能 代码示例: 代码: urls.py from django.conf.urls import url from django.contrib impo ...
- python学习-- Django Ajax CSRF 认证
使用 jQuery 的 ajax 或者 post 之前 加入这个 js 代码:http://www.ziqiangxuetang.com/media/django/csrf.js /*======== ...
- Django之初识Ajax
1.简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数据 ...
随机推荐
- TomCatserver的安装,环境的配置,服务的启动以及验证---ShinePans
首先下载 TomCat 6: http://yunpan.cn/cg5icf3dha4k3 提取码 34c5 然后配置环境变量: 电脑>>>属性>>>高级系统设置 ...
- C#实现马尔科夫模型例子
已知条件:三个缸N状态,每个缸中不同颜色球的个数M状态值,时间轴T,观察值序列O 参数:状态值序列,转移概率序列 求:概率 后台代码如下 , M = ;//N状态,M状态值 (0橙色,1绿色,2蓝色, ...
- 带你装B,带你飞的大数据时代
我接触过的大数据有: 1.美国棱镜计划 2.前几天新闻报道的,苹果公司窃取用户隐私 3.百度的用户搜素习惯统计分析 4.淘宝的用户购物习惯分析,智能推荐宝贝 5.浏览器的智能标签页 ... 最想了解的 ...
- case when进行数据统计
SELECT SUM(CASE WHEN `status` = '1' THEN 1 ELSE 0 END) AS waitpay, SUM(CASE WHEN `group_done` = '1' ...
- [转]Dialog
在Android开发中,我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框,在我们使用Android的过程中,我归纳了一 ...
- openStack aio 测试
- Reward(toposort)
http://acm.hdu.edu.cn/showproblem.php?pid=2647 #include <stdio.h> #include <string.h> #i ...
- [Swift通天遁地]五、高级扩展-(10)整形、浮点、数组、字典、字符串、点、颜色、图像类的实用扩展
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- Java并发编程系列之Semaphore详解
简单介绍 我们以饭店为例,假设饭店只有三个座位,一开始三个座位都是空的.这时如果同时来了三个客人,服务员人允许他们进去用餐,然后对外说暂无座位.后来的客人必须在门口等待,直到有客人离开.这时,如果有一 ...
- 点开瞅瞅，再来几道Python面试题吧，Python面试题No20
本面试题题库,由公号:非本科程序员 整理发布 第1题:如何理解 Django 被称为 MTV 模式? 这个题就是面向对象设计和设计模式的开始. 你可能比较熟悉的模式叫做: MVC.说是 Model V ...