当需要在弹出的对话框中，做判断操作时，需要用到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初识的更多相关文章
	

    
								
  1. django ajax 及批量插入数据 分页器
		
    ``` Ajax 前端朝后端发送请求都有哪些方式 a标签href GET请求 浏览器输入url GET请求 form表单 GET/POST请求 Ajax GET/POST请求 前端朝后端发送数据的编码 ...
    
		
    2. 
						
  2. Django ajax的简单使用、自定义分页器
		
    一. ajax初识 1. 前后端传输数据编码格式contentType 使用form表单向后端提交数据时,必须将form表单的method由默认的get改为post,如果提交的数据中包含文件,还要将f ...
    
		
    3. 
						
  3. Django ajax MYSQL Highcharts<1>
		
    Another small project with django/Ajax/Mysql/Highcharts. 看下效果图  - delivery dashboard .嘿嘿 是不是还蛮好看的. 废 ...
    
		
    4. 
						
  4. django ajax练习
		
    这几天遇到了django ajax请求出错的问题,总结一下 前端js:我这里创建的是一个字典格式的数据,前端js收到字典之后也是要用字典的形式去解包后台传送过来的数据,比如我下面的写法:data['s ...
    
		
    5. 
						
  5. 关于Django Ajax CSRF 认证
		
    CSRF(Cross-site request forgery跨站请求伪造,也被称为“one click attack”或者session riding,通常缩写为CSRF或者XSRF,是一种对网站的 ...
    
		
    6. 
						
  6. day059 ajax初识 登录认证练习
		
    ajax初识 ajax有两个特点: 一个是异步,另一个是浏览器页面局部刷新(这个特点是用户感受不到的时候进行的) 示例: 页面输入两个整数,通过AJAX传输到后端计算结果并返回 在HTML文件中: & ...
    
		
    7. 
						
  7. django ajax增 删 改 查
		
    具于django ajax实现增 删 改 查功能 代码示例: 代码: urls.py from django.conf.urls import url from django.contrib impo ...
    
		
    8. 
						
  8. python学习-- Django Ajax CSRF 认证
		
    使用 jQuery 的 ajax 或者 post 之前 加入这个 js 代码:http://www.ziqiangxuetang.com/media/django/csrf.js /*======== ...
    
		
    9. 
						
  9. Django之初识Ajax
		
    1.简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数据 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. javascript 中文与Unicode相互转化
			
      javascript 中文与Unicode相互转化 CreateTime--2018年3月30日11:26:50 Author:Marydon /** * 中文与Unicode的相互转换 */ v ...
    
			
    2. 
						
  2. Apache配置基于域名的虚拟主机
			
    一.设定 模拟域名  www.wang.org.blog.wang.org.bbs.wang.org 网站文件夹 /var/html/www./var/html/blog./var/html/bbs  ...
    
			
    3. 
						
  3. 用WebCollector爬取新浪微博数据
			
    教程已转移:http://datahref.com/archives/28 WebCollector爬取新浪微博等完整演示样例project可加群250108697或345054141从群文件里下载. ...
    
			
    4. 
						
  4. JAVA学习（三）：Java基础语法（变量、常量、数据类型、运算符与数据类型转换）
			
    Java基础语法(变量.常量.数据类型.运算符与数据类型转换) 1.变量 Java中.用户能够通过指定数据类型和标识符来声明变量.其基本的语法为: DataType identifier; 或 Dat ...
    
			
    5. 
						
  5. 使用 Pascal 脚本编写网页, PWP 项目
			
    下载后得到 pwp.rar 文件. 解压到一个文件夹里面, 比方  e:\my_sys 文件夹下. 设计一下的脚本. 測试能否够执行. <%  uses sysutils; begin      ...
    
			
    6. 
						
  6. 利用rman自己主动备份转储spfile
			
    利用rman自己主动备份转储spfile [情景简单介绍] 生产环境丢失了server的參数文件,rman已开启自己主动备份设置. [操作过程简述] ----启动rman $rman target / ...
    
			
    7. 
						
  7. 【HAOI 2008】 糖果传递
			
    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1045 [算法] 环形均分纸牌问题 [代码] #include<bits/std ...
    
			
    8. 
						
  8. 【POJ 3190】 Stall Reservations
			
    [题目链接] http://poj.org/problem?id=3190 [算法] 将这些牛按开始吃草的时间排序 维护一个数组S,Si表示畜栏i进去的最后一头牛结束吃草的时间,对于每头牛,找任意一个 ...
    
			
    9. 
						
  9. java网络编程TCP
			
    图片来自网络 [服务端] import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; im ...
    
			
    10. 
						
  10. 如何看待B站疑似源码泄漏的问题？
			
    今天突然看到关于B站源码泄漏事.网曝B站整个网站后台工程源码遭泄露,开源项目平台Github上疑似出现了Bilibili网站后台工程,内含部分用户名密码.目前官方还没对此事作出任何回应,所以还无法确定 ...
    
			
    11.