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. Xiangqi（简单模拟）

    4746: Xiangqi 时间限制(普通/Java):1000MS/3000MS     内存限制:65536KByte 总提交: 15            测试通过:2 描述 Xiangqi i ...

  2. jenkins忘记admin密码解决办法

    参考网址:https://www.jianshu.com/p/2995ae8157e7

  3. 图片裁剪 cropper.js 上传组件封装 vue

    //HTML cropper.js 文档地址: https://github.com/fengyuanchen/cropperjs/blob/master/README.md <template ...

  4. python常用技巧

    1,关于tab键与4个空格: 由于不同平台间,tab键值设置有所区别,据相关介绍,官方在缩进方面推荐使用4个空格.方便起见,可设置tab自动转换为4个空格. 1.1在pycharm中:    通过fi ...

  5. 雷林鹏分享：Composer 安装

    下午在安装 Laravel 框架过程中,遇到了不少问题,因为 Laravel 的安装依赖于 composer,这里就先介绍一下 composer 的安装方法: 安装方法: #下载 sudo curl ...

  6. 20165303魏煜第一周kali安装

    1.根据网址下载kali 这是kali的下载地址https://www.kali.org 找到download选择Kali Linux 64 bit VMware VM,点击后面蓝色部分开始下载选择6 ...

  7. 从ranknet到lamdarank，再到lamdamart

    learn2rank目前基本两个分支,1是神经网络学派ranknet,lamdarank,另一个是决策树学派如gbrank,lamdamart 05年提出ranknet,算分模块是简单的全连接网络,l ...

  8. JS 超类和子类

    此篇由别的大神的博客与<javascript高级程序设计>一书整理而来 原博客地址:https://hyj1254.iteye.com/blog/628555 看到javascript高级 ...

  9. [luogu P3065] [USACO12DEC]第一!First!

    [luogu P3065] [USACO12DEC]第一!First! 题目描述 Bessie has been playing with strings again. She found that ...

  10. C++标准模板库（STL）之Map

    1.Map的常用用法 map:映射.可以将任何基本类型,结构体,STL容器映射到任何基本类型包括容器. 使用map,需要加map的头文件,#include<map>和using names ...