1.urls.py

url(r'^jiafa', views.jiafa),

2.views.py

def jiafa(request):

    if request.method == "GET":

        return render(request, "jiafa.html", locals())

    elif request.method == "POST":

        res = eval(json.dumps(request.POST))

        obj = {}

        obj["status"] = "true"

        obj["v1"] = res["v1"]

        obj["v2"] = res["v2"]

        obj["v3"] = int(res["v2"])*int(res["v1"])

        print(obj)

        return HttpResponse(json.dumps(obj))

3.jiafa.html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="/jiafa" method="POST" id="fm">

    {% csrf_token %}

    <input type="text" name="v1"/>*

    <input type="text" name="v2"/>=

    <input type="text" name="v3" class="v3"/>

    {#    <input id="btn" type="button" value="Ajax提交" onclick="ajaxsubmit();"/><span id="sp"></span>#}

    <input id="btn" type="button" value="Ajax提交"/><span id="sp"></span>

</form>

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

<script>

    $(function () {

        ajaxsubmit()

    });

    function ajaxsubmit() {

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

            $.ajax({

                url: "/jiafa",

                data: $("#fm").serialize(),

                type: "POST",

                dataType: "json",

                success: function (args) {

                    if (args.status) {

                        var v = $(".v3").val(args.v3);

                        console.log(v.val());

                    }

                },

                error: function (arg) {

                    console.log(arg)

                }

            })

        });

    }

</script>

</body>

</html>

4.验证

Ajax 小实例的更多相关文章

  1. AJAX 小实例（转摘）

    最近老总提了一个小功能,在搜索网吧列表的时候加上网吧所属代理商这个条件,原有的搜索条件是一个地区二级联动,现在需要根据不同的地区显示不同的代理商集合.即在触发地区下拉框的onchange事件时,代理商 ...

  2. ajax常用实例代码总结新手向参考(一)

    http的交互方法有四种:get.post.put(增加数据).delete(删除数据) put和delete实现用的是get和post   get方式 页面不能被修改,只是获取查询信息.但是提交的数 ...

  3. JavaScript小实例：拖拽应用（二）

    经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...

  4. winform 异步读取数据 小实例

    这几天对突然对委托事件,异步编程产生了兴趣,大量阅读前辈们的代码后自己总结了一下. 主要是实现 DataTable的导入导出,当然可以模拟从数据库读取大量数据,这可能需要一定的时间,然后 再把数据导入 ...

  5. CSS应用内容补充及小实例

    一.clear 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  6. Objective-C之代理设计模式小实例

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  7. Objective-C之@类别小实例

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  8. OC小实例关于init方法不小心的错误

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  9. canva实践小实例 —— 马赛克效果

    前面给大家带来了操作像素的API,此时此刻,我觉得应该配以小实例来进行进一步的说明和演示,以便给大家带来更宽广的视野和灵感,你们看了我的那么多的文章,应该是懂我的风格,废话不多说,进入正题: 这次给大 ...

随机推荐

  1. (转)WebSphere禁用SSLv3和RC4算法教程

    原文:https://www.cnblogs.com/lsdb/p/7126399.html WebSphere经常会报“SSL 3.0 POODLE攻击信息泄露”和"SSL/TLS 受诫礼 ...

  2. Android 开发工具类 37_ ContactInfoProvider

    Android 手机中的联系人信息保存在  data\data\com.android.providers.contacts\databases\contacts2.db 中.主要有 raw_cont ...

  3. 02 - JavaSE之基础及面向对象（补充）

    引用数据类型 java中的数据类型可以分为 基本数据类型 和 引用数据类型 两大类 int float char boolean等都是基本数据类型 类类型都是引用数据类型 引用数据类型类似C语言中的指 ...

  4. 【转载】CentOS中crontab定时计划任务的使用

    转载自:http://blog.csdn.net/testcs_dn/article/details/48780971 概述 利用“任务计划”,可以将任何脚本.程序或文档安排在某个最方便的时间运行.通 ...

  5. SSM事务——事务回滚如何拿到返回值

    MySQL数据库一共向用户提供了包括BDB.HEAP.ISAM.MERGE.MyISAM.InnoDB以及Gemeni这7种Mysql表类型.其中BDB.InnoDB属于事务安全类表,而其他属于事务非 ...

  6. 面试题----makefile文件的作用

    make工具和makefile文件 make工具和makefile文件简介 make命令和makefile文件的结合提供了一个在项目管理领域十分强大的工具.它不仅常被用于控制源代码的编译和链接,而且还 ...

  7. Solidity字符串类型

    字符串可以通过""或者''来表示字符串的值,Solidity中的string字符串不像C语言一样以\0结束,比如abcd这个字符串的长度就为我们所看见的字母的个数,它的长度为4. ...

  8. Entity Framework 6.x 学习之Database First

    一.单表操作 1. 建表 CREATE TABLE [Chapter1].[Customer] ( , ), ) COLLATE Chinese_PRC_CI_AS NOT NULL, ) COLLA ...

  9. C#Redis 常用key操作

    一.前戏 在该系列的前几篇博客中,主要讲述的是与Redis数据类型相关的命令,如String.List.Set.Hashes和Sorted-Set.这些命令都具有一个共同点,即所有的操作都是针对与Ke ...

  10. Redis-发布与订阅

    发布与订阅(pub/sub)的特点是订阅者负责订阅频道发送者负责向频道发送二进制字符串消息.每当有消息发送至给定频道时,频道的所有订阅者都会收到消息 (发布和订阅命令) SUBSCRIBE : SUB ...