当需要在弹出的对话框中，做判断操作时，需要用到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. express 不是内部或外部命令（windows）解决方式
			
    请环境变量设置 注意 "D:\soft\nodejs\"这个是笔者自己安装在电脑上的node js文件夹,请改动成自己的 假设安装的express是4.X就要安装 express- ...
    
			
    2. 
						
  2. 【翻译自mos文章】使用aum（ Automatic Undo Management） 时遇到 ORA-01555错误--- 原因和解决方式。
			
    使用aum( Automatic Undo Management) 时遇到 ORA-01555错误--- 原因和解决方式. 參考原文: ORA-01555 Using Automatic Undo M ...
    
			
    3. 
						
  3. php訪问控制
			
    訪问控制通过keywordpublic,protected和private来实现. 被定义为公有的类成员能够在不论什么地方被訪问.被定义为受保护的类成员则能够被其自身以及其子类和父类訪问.被定义为私有 ...
    
			
    4. 
						
  4. Unix/Linux环境C编程新手教程(40) 初识文件操作
			
     1.函数介绍 close(关闭文件) 相关函数 open,fcntl,shutdown.unlink,fclose 表头文件 #include<unistd.h> 定义函数 int  ...
    
			
    5. 
						
  5. Android简单开发之   通用Adapter ViewHolder
			
    我们寻常使用Adapter的方式 public class BusbaseSearchApadter extends SimpleBaseApadter { private List<Busba ...
    
			
    6. 
						
  6. java Map 转 List
			
    public static void testMapVoid () { Map map = new HashMap(); map.put("a", "a1"); ...
    
			
    7. 
						
  7. linux设备驱动模型之Kobject、kobj_type、kset【转】
			
    本文转载自:http://blog.csdn.net/fengyuwuzu0519/article/details/74838165 版权声明:本文为博主原创文章,转载请注明http://blog.c ...
    
			
    8. 
						
  8. JZOJ 1667 ( bzoj 1801 ) [ AHOI 2009 ] 中国象棋 —— DP
			
    题目:https://jzoj.net/senior/#main/show/1667 首先,一行.一列最多只有 2 个炮: 所以记录一下之前有多少行有 0/1/2 个炮,转移即可: 注意取模!小心在某 ...
    
			
    9. 
						
  9. 61.员工信息管理Extjs 页面
			
    1.员工信息管理jsp <%@ page language="java" pageEncoding="UTF-8"%> <script typ ...
    
			
    10. 
						
  10. [Swift通天遁地]二、表格表单-(9)快速创建一个美观强大的表单
			
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
    
			
    11.