Ajax提交表单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link href="/static/common.css" rel="stylesheet">

    <style>

        .hide {

            display: none;

        }

     .shadow {

         position:fixed;

         left:0;

         top: 0;

         bottom: 0;

         right: 0;

         background-color: black;

         opacity: 0.6;

         z-index: 1;

    }

        .add-app {

            position: fixed;

            height: 400px;

            width: 400px;

            margin-left:100px ;

            border: 1px solid indianred;

            top: 100px;

            left: 25%;

            background-color: white;

            z-index: 2;

        }

    </style>

</head>

<body>

<h1>应用列表:</h1>

<P><input type="button" value="添加" id="i1"/></P>

<table border="">

    <thead>

     <tr>

         <td>应用名称</td>

         <td>应用主机列表</td>

     </tr>

    </thead>

    <tbody>

        {% for row in app_list%}

            <tr>

                <td>{{ row.name }}</td>

                <td>

                    {% for host in row.r.all %}

                    <span class="host_tag">{{ host.hostname }}</span>

                    {% endfor %}

                </td>

            </tr>

        {%endfor%}

    </tbody>

</table>

<div class="shadow hide"></div>

<form id="add_form">

<div class="add-app hide">

    <input type="text" placeholder="应用名称" name="app_name"/>

    <div class="group">

    <select id="host_list" name="host_list" multiple>

        {% for row in host_list %}

        <option value="{{row.nid}}">{{row.hostname}}</option>

        {% endfor %}

    </select>

        </div>

    <input type="submit" value="提交">

    <input id="ajax_submit" type="button" value="ajax提交">

    <input id='i2' type="button" value="取消">

    <span id="error_msg" style="display: inline-block;color: red"></span>

</div>

</form>

<script src="/static/jquery-3.2.1.min.js"></script>

<script>

    $(function () {

        $('#i1').click(function () {

            $('.shadow,.add-app').removeClass('hide');

        })

         $('#i2').click(function () {

            $('.shadow,.add-app').addClass('hide');

        })

        $("#ajax_submit").click(function () {

            $.ajax({

                url:'/xiaoqing/ajax_submit/',    #//提交url

                data:$("#add_form").serialize(), # //input,select数据打包发向后台

                type:'POST',     # //提交请求类型

                dataType:'Json',   #//发送数据类型

                traditional:true,   #//如果是多选的话，必须加上此选项

                success:function (obj) {      #//发送成功后回调函数

                    console.log(obj);

                    location.reload(); #刷新

                    location。href('http://')  #跳转

                },

                error:function () {

                }

            })

        })

    })

</script>

</body>

</html>

ajax.html

def app(request):

    if request.method=="GET":

        app_list=models.Application.objects.all()

        host_list=models.Host.objects.all()

        for row in app_list:

            print(row.name,'-|-',row.r.all())

        return render(request,'app.html',{'app_list':app_list,'host_list':host_list,})

    elif request.method == "POST":

        appname = request.POST.get('app_name')

        hostlist = request.POST.getlist('host_list')

        print(appname,hostlist)

        obj = models.Application.objects.create(name=appname)

        obj.r.add(*hostlist)

        return redirect('/xiaoqing/app')

views函数

ajax提交表单向后台发送数据的更多相关文章

  1. ajax提交表单序列化（serialize()）数据

    知识点: $("#form").serialize();将表单数据序列化为标准URL编码文本字符串(key1=value1&key2=value2…). 以下用一个例子来演 ...

  2. ajax提交表单、ajax实现文件上传

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

  3. Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

  4. jquery ajax提交表单数据的两种方式

    http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...

  5. Jquery ajax提交表单几种方法详解

    [导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...

  6. 关于ajax提交表单的一些实例及遇到的问题和解决办法

    ajax提交的表单有两种情况: 第一种:input type类型没有file上传文件类型的表单 第二种:input type类型有file上传文件类型的表单 之所以分为两种:是因为原生ajax是不能提 ...

  7. Validator验证Ajax提交表单的方法

    Validator验证Ajax提交表单的方法 转自:http://hunanpengdake.iteye.com/blog/1671360 当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form ...

  8. lavarel框架中如何使用ajax提交表单

    开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加 在网上看了很多的解决方式,我是用下面这种方法解决的: ...

  9. Ajax提交表单初接触

    <!doctype html> <html class="no-js"> <head> <meta charset="utf-8 ...

随机推荐

  1. 蓝牙 - 小米手环3 NFC版BLE协议研究

    0x01 前言 最近买到了小米手环3nfc版本,基本上实现了我对手环的所有功能需求,高中的时候就缠线圈做过戒指一卡通,但是缺陷是不好看,而且只能储存一张卡,等 手环3nfc版我认为比较好的功能 可以储 ...

  2. day1——分割数组

    // 小白一名,0算法基础,艰难尝试算法题中,若您发现本文中错误, 或有其他见解,往不吝赐教,感激不尽,拜谢. 领扣 第915题 今日算法题干//给定一个数组 A,将其划分为两个不相交(没有公共元素) ...

  3. 4.3 thymeleaf模板引擎的使用

    参考说明:以下笔记参考来自尚硅谷springboot教学中的笔记! thymeleaf官网docs: https://www.thymeleaf.org/documentation.html 模板引擎 ...

  4. Struts 2 执行流程 配置信息

    Struts 2 执行流程 首先,浏览器访问,经过Filter,Filter从src/struts.xml中寻找命名空间和action的名字,获取action类,从方法中拿到返回值,接着从result ...

  5. git删除文件夹

    git  rm  要删除的文件夹  -r -f   git  commit  -m  'del  config' git  push 使用场景,删除test文件夹,本来在码云上,正常的文件夹右击会出现 ...

  6. Cannot resolve classpath entry: /Program Files/IBM/SQLLIB/java/db2java.zip

    在mybatis的逆向工程中,使用java代码和xml配置文件生成时出现以下的错误 原来自己在复制官方配置文件的参考时将这一句也复制了进来 删掉后运行即可!成功的话控制台是没有输出的

  7. 雷林鹏分享：jQuery EasyUI 数据网格 - 创建列组合

    jQuery EasyUI 数据网格 - 创建列组合 easyui 的数据网格(DataGrid)可以创建列组合,如下所示: 在本实例中,我们使用平面数据来填充数据网格(DataGrid)的数据,并把 ...

  8. JMETER-02

    JMeter使用篇 1.界面介绍 2.JMeter-测试计划 测试计划:一个JMeter脚本只有一个测试计划,且测试计划必须启用状态 容易掉的坑:由于JMeter脚本中的每个元器件都可以单独禁用,上级 ...

  9. 169. Majority Element求众数

    网址:https://leetcode.com/problems/majority-element/ 参考:https://blog.csdn.net/u014248127/article/detai ...

  10. ThreadLocal之我所见

    网上有很多关于ThreadLocal的文章,大部分都提到了多线程之间共享资源的问题.其实ThreadLocal和多线程之间一点关系都没有.如果有,我怕是它的名字改成ThreadShare是不是更合适呢 ...