当需要在弹出的对话框中，做判断操作时，需要用到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. android_handler(一)
			
    仅仅是一个简单的handler的样例,目的就是对handler有一个初步的接触. 在layout上加入一个button,点击按钮,然后打印出利用handler传送的数据.(都是执行在mainthrea ...
    
			
    2. 
						
  2. python-pexpect_01安装
			
    一:python2.7.12安装   #获取python2.7.12 wget https://www.python.org/ftp/python/2.7.12/Python-2.7.12.tgz   ...
    
			
    3. 
						
  3. SpringBoot在Impl类中调用其它service层失败解决办法
			
    在AImpl.java文件中引用BImpl.java的方法,编译正常,运行到调用的地方,报空指针异常,跟踪到异常位置,发现service为空,也就是按照之前controller层通过@Autowire ...
    
			
    4. 
						
  4. Android 自己定义圆圈进度并显示百分比例控件（纯代码实现）
			
    首先,感谢公司能给我闲暇的时间,来稳固我的技术,让我不断的去探索研究,在此不胜感激. 先不说实现功能,上图看看效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...
    
			
    5. 
						
  5. NoSQL 世界交换数据的事实标准
			
    https://www.elastic.co/guide/cn/elasticsearch/guide/current/data-in-data-out.html An object is a lan ...
    
			
    6. 
						
  6. AngularJS 1.x 国际化——Angular-translate例子
			
    可运行代码如下: <!DOCTYPE html> <html ng-app="MyApp"> <head> <meta http-equi ...
    
			
    7. 
						
  7. nginx初相识
			
    在本机上下载了一个nginx,版本为1.14.0. 安装: 对于安装比较简单,下载后解压到指定目录,目录结构如下 启动: 最简单的直接双击nginx.exe,有黑窗一闪而过,不要怀疑,看一下logs的 ...
    
			
    8. 
						
  8. [Swift通天遁地]八、媒体与动画-(4)给相机添加CoreImage滤镜效果
			
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
    
			
    9. 
						
  9. Java中从控制台输入的三种方式
			
    我们最熟悉的从控制台读取一个字符或者一个字符串都知道用Scanner,那么除了Scanner还有没有其他的呢,答案是有的,我们来看看. System.in.read() System.in.read( ...
    
			
    10. 
						
  10. JavaScript--Array 数组对象
			
    Array 数组对象 数组对象是一个对象的集合,里边的对象可以是不同类型的.数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置,是从零开始的 数组定义的方法: 1. 定义了一个空数组: v ...
    
			
    11.