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. power shell 脚本了解

    1. https://www.cnblogs.com/xianglongsdu/p/5832984.html 2.https://www.cnblogs.com/lsdb/p/9531338.html ...

  2. NetSec2019 20165327 Exp4 恶意代码分析

    NetSec2019 20165327 Exp4 恶意代码分析 一.实践目标 1.监控你自己系统的运行状态,看有没有可疑的程序在运行. 2.分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分 ...

  3. win10搭建svn服务

    1,安装服务器版svnhttps://tortoisesvn.net/downloads.html查看版本 svn --version 2,创建版本仓库提倡创建公共仓库,那么可以多次增加项目svnad ...

  4. 小程序getLocation出现的各种问题汇总

    1.小程序无法弹出授权位置的弹框: 需要在app.json中增加相关配置文件: "permission": { "scope.userLocation": { ...

  5. linux逻辑卷管理（LVM）

    1. 逻辑卷(LVM)的原理 LVM(Logical Volume Manager)逻辑卷管理 是在物理磁盘和文件系统的之间添加一个逻辑层,通过对底层物理磁盘的封装,以逻辑卷的方式呈现给上层应用,通过 ...

  6. OSS文件上传到阿里云

    <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script&g ...

  7. call apply bind的区别

    都是天生自带的内置方法(Function.prototype),所有的函数都可以调取这三个方法,改变this指向 call 语法:fn.call(context,para1......) 把fn方法执 ...

  8. RK3288 GPIO

    简介GPIO, 全称 General-Purpose Input/Output(通用输入输出),是一种软件运行期间能够动态配置和控制的通用引脚.RK3288有9组 GPIO bank: GPIO0,G ...

  9. JAVA实现简单的四则运算

    GitHub 项目地址 https://github.com/745421831/-/tree/master PSP PSP2.1 Personal Software Process Stages 预 ...

  10. JAVA如何request没有参数的post提交

    过去做网页的时候 post过来的值都是带参的 我就request.getParameter("")来获取 现在过来的不带参 就一串字符串 我应该怎么获取? //用获取数据流的方式, ...