当需要在弹出的对话框中，做判断操作时，需要用到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. CSDN学院 免费技术答疑公开课，本周六场即将开播~~~
			
    为了酬谢广大学员.CSDN学院特推出免费技术答疑公开课.让您开启一段充实的学习之旅~ 本周六场即将开播. ----------------------------------------------- ...
    
			
    2. 
						
  2. Codeforces Beta Round #67 (Div. 2)C. Modified GCD
			
    C. Modified GCD time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...
    
			
    3. 
						
  3. [luogu_U15118]萨塔尼亚的期末考试
			
    https://zybuluo.com/ysner/note/1239615 题面 \(T\)次询问,求出\[\sum_{i=1}^n\frac{i}{\frac{n(n+1)}{2}}fib_i\] ...
    
			
    4. 
						
  4. linux下打开windows txt文件中文乱码问题 （转载）
			
    转自:http://blog.csdn.net/imyang2007/article/details/7448177 在linux操作系统下,我们有时打开在windows下的txt文件,发现在wind ...
    
			
    5. 
						
  5. PCB javascript实现个税5000计算
			
    个税调整为5000计划实施是今年10月份.而明年一月份全面实施, 马上快到5000个税实施的日子了,当到了个税实施日子时,必定网络会产生热点,这个时候需要就是蹭热点的时候到来时. 全国网友肯定都会关心 ...
    
			
    6. 
						
  6. 洛谷P1182数列分段
			
    题目描述 对于给定的一个长度为N的正整数数列A[i],现要将其分成M(M≤N)段,并要求每段连续,且每段和的最大值最小. 关于最大值最小: 例如一数列4 2 4 5 1要分成3段 将其如下分段: [4 ...
    
			
    7. 
						
  7. aixcoder智能编程助手开发插件推荐
			
    1. aixcoder安装使用 1.1. 介绍 1.1.1. 功能 智能代码提示她用强大的深度学习引擎,能给出更加精确的代码提示: 代码风格检查她有代码风格智能检查能力,帮助开发者改善代码质量: 编程 ...
    
			
    8. 
						
  8. sql  case when 用法
			
    sql语言中有没有类似C语言中的switch case的语句?? 没有,用case   when   来代替就行了.            例如,下面的语句显示中文年月         select  ...
    
			
    9. 
						
  9. 349 Intersection of Two Arrays 两个数组的交集
			
    给定两个数组,写一个函数来计算它们的交集.例子: 给定 num1= [1, 2, 2, 1], nums2 = [2, 2], 返回 [2].提示:    每个在结果中的元素必定是唯一的.    我们 ...
    
			
    10. 
						
  10. 涨知识III － 百度2016校园招聘——移动软件研发工程师
			
    1.列关于线程调度的叙述中,错误的是(). 正确答案 :BE A调用线程的sleep()方法,可以使比当前线程优先级低的线程获得运行机会 B调用线程的yeild()方法,只会使与当前线程相同优先级的线 ...
    
			
    11.