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. 【NET Core】Nuget包发布流程

    1.新建一个.NET Core类库 2.新增一个方法,并编译项目 3.下载Nuget.exe,与刚才新建的类库放在同一目录下 下载地址:https://www.nuget.org/downloads ...

  2. canvas 模拟时钟

    <meta charset="utf-8"> <canvas width="1000" height="1000" id= ...

  3. Evaluate X and Y returned from the differential equation solvers using printput frequency in Python的代码

    把内容过程中经常用到的一些内容段做个备份,如下的内容是关于Evaluate X and Y returned from the differential equation solvers using ...

  4. Shiro 与spring 整合的及简单使用(转)

    文章完全转载自: http://www.cnblogs.com/learnhow/p/5694876.html  ,大家可以点击访问原文链接,个人仅作学习收藏 ! 本篇内容大多总结自张开涛的<跟 ...

  5. 1.1 Django起步

    1.1 Django起步   1.1.1. Django简介   Django开发框架(简称Django)诞生的时间是2003年的金秋时节,美国有两位程序员Adrian  Holovaty和Simon ...

  6. java中的默认类型+spring

    默认引用类型 Integer Character String(包装类)... private Integer age  ; 默认是null 默认基本类型 int char string.privit ...

  7. Back To Top

    //scroll to top (function ($) { $.fn.backTop = function () { var backBtn = this; var position = 1000 ...

  8. java 获取微信公众号code为空

    失败的原因是没将回调方法encode转换 /** * URL编码(utf-8) * * @param source * @return */ public static String urlEncod ...

  9. 现代 PHP 新特性 —— 内置的 HTTP 服务器 (转)

    转自 https://laravelacademy.org/post/4422.html 从 PHP 5.4.0 起,PHP内置了Web服务器,这对于认为需要Apache或Nginx才能预览PHP应用 ...

  10. windows 下 修改jmeter ServerAgent端口

    from:https://blog.csdn.net/wanglha/article/details/51281462 如果想修改UDP和TCP的端口该如何做呢,可以采用如下的方式: CMD命令进入S ...