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. 在微信浏览器中 location.reload() 不刷新解决方案(直接调用方法)

    1.问题 在微信浏览器中,需要时刷新当前页面. 正常情况下我们直接使用 location.reload 方法来刷新. 2.解决方法 function realod(){ var {search,hre ...

  2. pytest--fixture参数化的实现方式和执行顺序

    之前看到fixture函数可以通过添加,params参数来实现参数化,后续看到了悠悠 的博客,可以通过@pytest.mark.parametrize来实现,现在做一个总结 实现方式一 通过param ...

  3. 【编程语言】extern "C"让C++与C进行混合编程

    最近工作不算轻松,现在作为一个项目的负责人统一管理着前端.后端.设计.产品,身上肩负着不小责任,虽然有压力但是对于自己也是一种锻炼.同时自己也在负责整个后端的架构设计,虽然后端经验不是很多,但是自己正 ...

  4. 第一章 Java语言概述1

    1.人机交互有两种方法:一种是图形化界面,一种是命令行方式 2.如何打开命令行:开始-在运行命令行中输入cmd 3.常用的DOS命令: dir(directory):列出当前目录下文件及文件夹 md( ...

  5. session和cookie的简介

    Session(时域)在计算机中,尤其是在网络应用中,称为“会话控制”.Session 对象存储特定用户会话所需的属性及配置信息.这样,当用户在应用程序的 Web 页之间跳转时,存储在 Session ...

  6. Python用上锁和解锁 lock lock.acquire lock.release 模拟抢火车票

    Python用上锁和解锁  lock lock.acquire lock.release 模拟抢火车票 import jsonimport timefrom multiprocessing impor ...

  7. ArcGIS中KML转为shp文件

    问题:如何将KML转为shp文件? 方法: 1.打开ArcMap -> ArcToolbox: 2.在ArcToolbox中选择“转换工具”-> “由KML转出” -> “KML转图 ...

  8. 一条shell命令让多台Linux服务器执行

    1.环境 局域网环境有3台Linux服务器,配置host文件 [root@master1 ~]# vim /etc/hosts 192.168.8.201 master1 192.168.8.202 ...

  9. vscode相关配置

    一.插件 二.首先项设置: { "git.enableSmartCommit": true, "gitlens.advanced.messages": { &q ...

  10. DocumentBuilderFactory.newInstance() 异常解决

    现象: objc[27212]: Class JavaLaunchHelper is implemented in both /Library/Java/JavaVirtualMachines/jdk ...