当需要在弹出的对话框中，做判断操作时，需要用到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. HDU 5015 233Matrix （构造矩阵）
			
    233 Matrix Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Tota ...
    
			
    2. 
						
  2. Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法
			
    同源是指同样的协议.域名.port,三者都同样才属于同域.不符合上述定义的请求,则称为跨域. 相信每一个开发者都曾遇到过跨域请求的情况,尽管情况不一样,但问题的本质都能够归为浏览器出于安全考虑下的同源 ...
    
			
    3. 
						
  3. 适用于app.config与web.config的ConfigUtil读写工具类     基于MongoDb官方C#驱动封装MongoDbCsharpHelper类（CRUD类）   基于ASP.NET WEB API实现分布式数据访问中间层（提供对数据库的CRUD） C# 实现AOP 的几种常见方式
			
    适用于app.config与web.config的ConfigUtil读写工具类   之前文章:<两种读写配置文件的方案(app.config与web.config通用)>,现在重新整理一 ...
    
			
    4. 
						
  4. jsoncpp的生成和使用
			
    从github下载jsoncpp-master 在执行\jsoncpp-master\makefiles\msvc2010文件夹下jsoncpp.sln 会有3个项目 执行lib_json项目生成li ...
    
			
    5. 
						
  5. 关于EditText的android:maxLength属性的注意事项
			
    一直以为在xml布局文件中对EditText添加 android:maxLength="30";属性是控制EditText字符数的.想当然的以为一个中文占2个字符,一个英文占1个字 ...
    
			
    6. 
						
  6. 布局技巧2：合并布局（merge标签）
			
    我们已经有文章向你描述如何使用<include />标签来重用和共享你的布局代码.这篇文章将向你阐述<merge />标签的使用以及如何与<include />标签 ...
    
			
    7. 
						
  7. spring web中的filter
			
    昨天看了会spring web中部分代码,主要是各种filter,回顾一下: Spring的web包中中有很多过滤器,这些过滤器位于org.springframework.web.filter并且理所 ...
    
			
    8. 
						
  8. bzoj2125 最短路——仙人掌两点间距离
			
    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2125 仙人掌!模仿 lyd 的代码写的,也算是努力理解了: 主要分成 lca 在环上和不在环 ...
    
			
    9. 
						
  9. pcntl研究
			
    虽说php用于并发计算有点山寨,但总比没有强把.(有问题请指正) 下面是pcntl多线程的例子.(只能用于cli模式,而且只能用于linux环境) <?php $starttime=microt ...
    
			
    10. 
						
  10. 观察者模式-C#实现
			
    定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. 观察者模式有四个角色:抽象主题.具体主题.抽象观察者.具体观察者. 抽象主题:把所有观察者对象 ...
    
			
    11.