很多页面用到的模态对话框，如知明网站https://dig.chouti.com/的登录页都是模态对话框，

当点登录时，是用的ajax提交，因为输入错了信息，有返回消息，而页面没有刷新。

jquery ajax格式：　

  1. $.ajax({
        'url':'/orm',
        'type':'post',
        'data':{'id':1,'name':'hhh'},
        success:function (data) {
            alert(data);
        }
    })
    url是提交到那个地址　　type是提交方法　　data是要提交的数据集合，可使用变量如：$('#id').val()，可一句话提交一个表单里的所有值 如：'data':$('#f1').serialize(),
  1. sucess:是服务成功返回数据时要执行的函数，服务器没返回数据时，这个函数不会执行，形参data,一定要带，即是返回的数据。
    提交给orm操作后 常用Httprespones返回一个字符串json格式，再用json解析 ，不能用redirect,用render也没大用
  2.  
  3. 这样我们在任何地方就可以用ajax提交数据到后台了，而页面不用刷新，一个简单标签即可提交，如：
  1. $('#ajax_submit').click(function () {
        $.ajax({
            'url':'/orm',
            'type':'post',
            'data':{'id':1,'name':'hhh'},
            success:function (data) {
                alert(data);
            }
        })
    })
  1. 例子：点击添加出现模态对话框，如果ip或端口格式不对，ajax提交立即返回错误提示不刷新。勾选1，3，5删除一次性删除并生效显示。

  1.  
  1. #models
  2. from django.db import models
  3. # Create your models here.
  4. class host(models.Model):
  5.     ip = models.CharField(max_length=255)
  6.     port = models.IntegerField()
  7.     group_code = models.ForeignKey(to='group',to_field='code',default='hr',on_delete='code')
  8. class group(models.Model):
  9.     code = models.CharField(max_length=30,default='hr',unique=True)
  10.     name = models.CharField(max_length=255)
  11.  
  12. #views
  13. from django.shortcuts import render,HttpResponse,redirect
  14. from cmbd import models
  15. import json
  16. def home(request):
  17.     return HttpResponse('<h1>home</h1>')
  18. def orm(request):
  19.     # models.host.objects.create(ip="1.1.1.1",port=80,code='market')
  20.     #models.host.objects.create(ip="1.1.1.6",port=88,group_code_id='dev')
  21.     # models.group.objects.create(code="dev",name="开发部")
  22.     # dic = {'code':'dep','name':"工程部"}
  23.     # models.group.objects.create(**dic)
  24.     if request.method == 'GET':
  25.         cmd =  request.GET.get('orm')
  26.         if cmd == 'add_host':
  27.             ip = request.GET.get('ip')
  28.             port = request.GET.get('port')
  29.             group_code = request.GET.get('group_code')
  30.             if ip and port:
  31.   models.host.objects.create(ip=ip,port=port,group_code_id=group_code)
  32.             else:
  33.                 return HttpResponse('error')
  34.             return redirect('/list')
  35.     else:
  36.         cmd = request.POST.get('orm')
  37.         if cmd == 'del_host':
  38.             host_id = request.POST.get('host_id')
  39.             if host_id:
  40.                 models.host.objects.filter(id=host_id).delete()
  41.             return HttpResponse('success')
  42.         elif cmd == 'add_host':
  43.             ip = request.POST.get('ip')
  44.             port = request.POST.get('port')
  45.             group_code = request.POST.get('group_code')
  46.             if ip and port:
  47.                 models.host.objects.create(ip=ip,port=port,group_code_id=group_code)
  48.             else:
  49.                 return HttpResponse('error')
  50.             return HttpResponse('success')
  51.         elif cmd == 'edit_host':
  52.             id = request.POST.get('id')
  53.             ip = request.POST.get('edit_ip')
  54.             port = request.POST.get('edit_port')
  55.             group_code = request.POST.get('edit_group_code')
  56.             if ip and port:               models.host.objects.filter(id=id).update(ip=ip,port=port,group_code_id=group_code)
  57.             else:
  58.                 return HttpResponse('error')
  59.             return redirect('/list')
  60.     return render(request,'orm.html')
  61.  
  62. def list(request):
  63.     v1 = models.host.objects.all()
  64.     v2 = models.group.objects.all()
  65.     return render(request,'list.html',{'v1':v1,'v2':v2})
  66.  
  67. def test_ajax(request):
  68.     ret = {"status":"true","data":"none","error":"none"}
  69.     try:
  70.         ip = request.POST.get('ip')
  71.         port = request.POST.get('port')
  72.         group_code = request.POST.get('group_code')
  73.         if len(ip) < 4:
  74.             ret["status"] = "false"
  75.             ret["error"] = "ip addr error"
  76.     except Exception as e:
  77.         pass
  78.     return HttpResponse(json.dumps(ret))
  79.  
  80. #templates
  81. <!DOCTYPE html>
  82. <html lang="en">
  83. <head>
  84.     <meta charset="UTF-8">
  85.     <title>Title</title>
  86.     <style>
  87.         td a{
  88.             cursor: pointer;
  89.         }
  90.         .hide{
  91.             display: none;
  92.         }
  93.         .shade{
  94.             position: fixed;
  95.             top:0;
  96.             left:0;
  97.             right:0;
  98.             bottom:0;
  99.             background-color: black;
  100.             opacity:0.6;
  101.             z-index: 99;
  102.         }
  103.         .add_model{
  104.             height:400px;
  105.             width:600px;
  106.             position: fixed;
  107.             left: 50%;
  108.             top: 50%;
  109.             margin-left: -300px;
  110.             margin-top: -200px;
  111.             background-color: white;
  112.             border: 1px solid greenyellow;
  113.             z-index: 100;
  114.         }
  115.     </style>
  116. </head>
  117. <body>
  118. <div id="shade" class="shade hide"></div>
  119. <div id="add_model" class="add_model hide">
  120. <form action="/orm" method="get" id="f1">
  121.     <table border="1px">
  122.         <thead><td>IP</td><td>端口</td><td>组别</td></thead>
  123.         <tr>
  124.             <td><input name="ip" type="text"/></td>
  125.             <td><input name="port" type="text"/></td>
  126.             <td>
  127.                 <select name="group_code">
  128.                     {% for i in v2 %}
  129.                     <option value="{{ i.code }}">{{ i.name }}</option>
  130.                     {% endfor %}
  131.                 </select>
  132.             </td>
  133.         </tr>
  134.     </table>
  135.     <label id="msg" class="hide"></label>
  136.     <input type="text" style="display: none;" name="orm" value="add_host"/>
  137.     <input class="host_cancel" type="button" value="取消" style="position: absolute;bottom: 0;right: 123px;"/>
  138.     <input id="add_host_ack" type="submit" value="确定" style="position: absolute;bottom: 0;right: 0;"/>
  139.     <input id="ajax_submit" type="button" value="ajax提交" style="position: absolute;bottom: 0;right: 50px;"/>
  140. </form>
  141. </div>
  142. <div id="edit_model" class="add_model hide">
  143. <form action="/orm" method="post" id="f2">
  144.     <table border="1px">
  145.         <thead><td>IP</td><td>端口</td><td>组别</td></thead>
  146.         <tr>
  147.             <td><input name="edit_ip" type="text"/></td>
  148.             <td><input name="edit_port" type="text"/></td>
  149.             <td>
  150.                 <select name="edit_group_code">
  151.                     {% for i in v2 %}
  152.                     <option value="{{ i.code }}">{{ i.name }}</option>
  153.                     {% endfor %}
  154.                 </select>
  155.             </td>
  156.         </tr>
  157.     </table>
  158.     <label id="edit_msg" class="hide"></label>
  159.     <input type="text" class="hide" name="id"/>
  160.     <input type="text" style="display: none;" name="orm" value="edit_host"/>
  161.     <input class="host_cancel" type="button" value="取消" style="position: absolute;bottom: 0;right: 50px;"/>
  162.     <input type="submit" value="确定" style="position: absolute;bottom: 0;right: 0;"/>
  163. </form>
  164. </div>
  165. <h1>主机列表：</h1>
  166. <form>
  167.     <input type="button" id="add_host" value="添加">
  168.     <input type="button" id="del_host" value="删除">
  169.     <input type="button" id="select_all" value="全选">
  170.     <input type="button" id="cancel_all" value="取消">
  171.     <input type="button" id="revert" value="反选">
  172. </form>
  173. <table border="" id="t1">
  174.     <thead><td>选择</td><td>序号</td><td>IP</td><td>端口</td><td>部门</td><td>操作</td></thead>
  175.     {% for i in v1 %}
  176.         <tr host_id="{{ i.id }}" group_code="{{ i.group_code_id }}">
  177.             <td><input type="checkbox"/></td>
  178.             <td>{{ forloop.counter }}</td><td>{{ i.ip}}</td><td>{{ i.port}}</td><td>{{ i.group_code.name}}</td><td><a class="del_single">删除</a>|<a class="edit_host">修改</a></td>
  179.         </tr>
  180.     {% endfor %}
  181. </table>
  182. <h1>组列表：</h1>
  183. <table border="" id="t2">
  184.         <thead><td>序号</td><td>代码</td><td>组名</td></thead>
  185.     {% for i in v2 %}
  186.         <tr group_id="{{ i.id }}"><td>{{ forloop.counter}}</td><td>{{ i.code}}</td><td>{{ i.name}}</td></tr>
  187.     {% endfor %}
  188. </table>
  189.  
  190. <script src="/static/jquery-3.3.1.js"></script>
  191. <script>
  192.     $(function () {
  193.         $('#add_host').click(function () {
  194.             $("#shade,#add_model").removeClass("hide");
  195.         })
  196.         $('.host_cancel').click(function () {
  197.             $(".shade,.add_model").addClass("hide");
  198.         })
  199.         $('#select_all').click(function () {
  200.             $('#t1 input[type="checkbox"]').prop("checked", true);
  201.         })
  202.         $('#cancel_all').click(function () {
  203.             $('#t1 input[type="checkbox"]').prop("checked", false);
  204.         })
  205.         $('#revert').click(function () {
  206.             $('#t1 input[type="checkbox"]').each(function () {
  207.                 if($(this).prop('checked')){
  208.                     $(this).prop('checked',false);
  209.                 }else {
  210.                     $(this).prop('checked',true);
  211.                 }
  212.             });
  213.         })
  214.         $('#del_host').click(function () {
  215.             $('#t1 input[type="checkbox"]').each(function () {
  216.                 if($(this).prop('checked')){
  217.                     host_id = $(this).parent().parent().attr('host_id');
  218.                     $.ajax({
  219.                         'url':'/orm',
  220.                         'type':'post',
  221.                         'data':{'orm':'del_host','host_id':host_id},
  222.                         success:function (data) {
  223.                             console.log(data);
  224.                             location.reload();
  225.                         }
  226.                     })
  227.                 }
  228.             });
  229.         })
  230.         $('#ajax_submit').click(function () {
  231.             $.ajax({
  232.                 'url':'/test_ajax',
  233.                 'type':'post',
  234.                 'data':$("#f1").serialize(),
  235.                 success:function (data) {
  236.                     obj = JSON.parse(data)
  237.                     if(obj.status=='true'){
  238.                         $('#msg').removeClass('hide').text(obj.data);
  239.                         location.reload();
  240.                     }else {
  241.                         $('#msg').removeClass('hide').text(obj.error);
  242.                     }
  243.                 }
  244.             })
  245.         })
  246.         $(".del_single").click(function () {
  247.             host_id = $(this).parent().parent().attr('host_id');
  248.             $(this).parent().parent().remove();
  249.             $.ajax({
  250.                 'url':'/orm',
  251.                 'type':'post',
  252.                 'data':{'orm':'del_host','host_id':host_id},
  253.                 success:function (data) {
  254.                     alert(data);
  255.                 }
  256.             })
  257.         })
  258.         $(".edit_host").click(function () {
  259.             group_code = $(this).parent().parent().attr('group_code');
  260.             host_id = $(this).parent().parent().attr('host_id');
  261.             ip = $(this).parent().parent().children().eq(2).text();
  262.             port = $(this).parent().parent().children().eq(3).text();
  263.             console.log(host_id,ip,port);
  264.             $("#shade,#edit_model").removeClass("hide");
  265.             $("#f2 select[name='edit_group_code']").val(group_code);
  266.             $("#f2 input[name='edit_ip']").val(ip);
  267.             $("#f2 input[name='edit_port']").val(port);
  268.             $("#f2 input[name='id']").val(host_id);
  269.         })
  270.  
  271.     })
  272. </script>
  273. </body>
  274. </html>
  1.  

form表单提交数据，页面必定会刷新，ajax提交数据不会刷新，做到悄悄提交,多选删除，ajax提交实例的更多相关文章

  1. form表单的一个页面多个上传按钮实例

    /* * 图片上传 */ @RequestMapping("/uploadFile") @ResponseBody public String uploadFile(@Reques ...

  2. form表单提交和ajax提交的区别

    form表单是整个页面跳到服务器的地址然后提交数据: ajax是往这个地址post数据 <form style="padding:0px;margin:0px;" targe ...

  3. web框架-（六）Django补充---form表单验证

    一.form表单验证 1. 常规html页面的form表单验证 常规页面中,如果想实现对表单中用户输入信息的数据验证,需要配合Ajax来实现. 使用前我们先来熟悉下函数参数:request,其中包含的 ...

  4. 前端HTML基础之form表单

    目录 一:form表单 1.form表单功能 2.表单元素 二:form表单搭建(注册页面) 1.编写input会出现黄色阴影问题 三:完整版,前端代码(注册页面) 四:type属性介绍 1.inpu ...

  5. Django中三种方式写form表单

    除了在html中自己手写form表单外,django还可以通过 继承django.forms.Form 或django.forms.ModelForm两个类来自动生成form表单,下面依次利用三种方式 ...

  6. thinkPHP5.0使用form表单提交数据和删除文章，不用TP的提示页面，使用弹出提示信息

    form表单提交数据和删除文章时,TP的默认信息提示页面的看起来不是很好看,想要实现弹窗提示怎么做呢? 前端:可以使用前端的一个知识--iframe,iframe元素会创建包含另外一个文档的内联框架: ...

  7. 从页面获取form表单提交的数据

    1 使用HttpServletRequest,方便灵活 页面代码,使用action提交一个表单,里边有球的id,球的主人,球的颜色,所在省份,区域 <form action="ball ...

  8. 关于form表单提交数据后不跳转页面+ajax接收返回值的处理

    1.前台的form表单建立,注意action.enctype的内容, 2.通过添加一个隐藏的iframe标签使form的target指向iframe来达到不跳转页面的效果,同时需要在js里获取ifra ...

  9. Form表单提交数据的几种方式

    一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...

  10. form表单action提交表单，页面不跳转且表单数据含文件的处理方法

    在最近的项目中需要将含 input[type='file']的表单提交给后台 ,并且后台需要将文件存储在数据库中.之前所用的方法都是先将文件上传到七牛服务器上,然后七牛会返回文件的下载地址,在提交表单 ...

随机推荐

  1. spring cloud使用Feign做消费端时的eureka.client.registerWithEureka/eureka.client.fetchRegistry是否配置的问题

    记录一下今天工作中的一个小失误. 今天用Feign搭建服务消费者的时候,考虑消费者不需要再提供服务给其他服务,所以不需要注册到注册中心(eureka)中.结果把registerWithEureka和f ...

  2. CSS效果：焦点图片

    HTML: <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

  3. QRCode.js生成二维码

    QRCode的GitHub地址: https://github.com/KeeeX/qrcodejs 该版本解决了主版本(https://github.com/davidshimjs/qrcodejs ...

  4. 'touch' 不是内部或外部命令，也不是可运行的程序或批处理文件。

    touch是Linux环境下的命令,当我们在cmd中使用时会弹出以下问题 在cmd中我们可以使用echo test> 然后我们用dir命令来查看一下当前文件夹下文件有没有创建 文件成功创建.

  5. 面试知识点准备-C++常见问题

    博客园写写格式简单的文章还行,格式一复杂就不行了,可能是我不会用吧,我有强迫症,有道云格式很好用,以后去有道写这种东西了 有道云笔记链接:http://note.youdao.com/noteshar ...

  6. 牛客网PAT乙级(Basic Level)真题-组个最小数 (20)

    组个最小数 (20) 时间限制 1000 ms 内存限制 32768 KB 代码长度限制 100 KB 判断程序 Standard (来自 小小) 题目描述 给定数字0-9各若干个.你可以以任意顺序排 ...

  7. error: 40 - 无法打开到 SQL Server 的连接

    服务器环境: 系统:windows2008 数据库:SQLSERVER2012 在与SQLServer建立连接时出现与网络相关的或特定与实例的错误.未找到或无法访问服务器.请验证实例名称是否正确并且S ...

  8. centos7 安装mysql出现Could NOT find Curses (missing CURSES_LIBRARY CURSES_INCLUDE_PATH)

    今天安装mysql 5.7 编译时出现一下问题: [root@localhost software]# cd mysql-5.7.21 [root@localhost mysql-5.7.21]# c ...

  9. zabbix AGENTS 在WINDOWS的安装

    1.下载 https://assets.zabbix.com/downloads/3.4.0/zabbix_agents_3.4.0.win.zip 解压 zabbix_agents_3.4.0.wi ...

  10. 小程序视频播放组件video

    最近在做一个视频播放的功能,要求如下: 1.实现视频的全屏播放: 2.实现视频相关信息的展示: 3.实现视频滑动上下切换效果: 肯定选择用原生组件video了,真是不用不知道,一用都是坑: 首先,组件 ...