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. #ifdef、#ifndef、#else、#endif执行条件编译

         我们开发的程序不只在pc端运行,也要在移动端运行.这时程序就要根据机器的环境来执行选择性的编译,如对PC端编译PC端的程序,对移动端编译移动端的程序,这里我们就可以用两组条件编译.     ...

  2. 修改Hosts文件提示没有权限怎么办

    解决办法:给host文件赋予权限 1.打开电脑C盘,在目录C:\Windows\System32\drivers\etc 下找到hosts文件 2.右键hosts文件,选择属性 3.点击hosts属性 ...

  3. [原] ubuntu安装Fcitx输入法

    1.终端输入: sudo add-apt-repository ppa:wengxt/fcitx-nightly 按回车确认添加 2.sudo apt-get update 更新软件源 3.sudo ...

  4. Vue笔记：webpack项目vue启动流程

    VUE启动流程 1. package.json 在执行npm run dev的时候,会在当前目录中寻找 package.json 文件, 有点类似 Maven 的 pom.xml 文件,包含项目的名称 ...

  5. slf4j 作用及logback概述

    为什么要使用slf4j 现实场景: 我们自己的系统中使用了logback这个日志系统 我们的系统使用了A.jar,A.jar中使用的日志系统为log4j 我们的系统又使用了B.jar,B.jar中使用 ...

  6. 开启linux远程访问权限

    摘要:今天在Linux服务器上安装了msyql数据库,在本地访问的时候可以访问,但是我想通过远程的方式访问的时候就不能访问了,查询资料后发现,Linux下MySQL默认安装完成后只有本地访问的权限,没 ...

  7. WIN32控件使用系统样式

    定义如下即可: #ifdef _M_IX86 #pragma comment(linker,"/manifestdependency:\"type='win32' name='Mi ...

  8. C指针与内存

    C指针与内存 指针是C / C++ 中重要的构造类型,指针赋予了C / C++程序直接访问和修改内存的能力.C / C++的许多重要应用,如编译.OS.嵌入式开发都依赖于这种能力. 冯诺依曼体系的计算 ...

  9. 【转载】H5页面列表的无线滚动加载（前端分页）

    本代码基于Vue的架构 1.首先,要滚动的内容放在一个‘id=box’ 的div里,对div进行scroll事件的监听 <div id="box" class="m ...

  10. 我的菜单在母版页，如何更改菜单点击后的效果 Ver2

    很久之前,Insus.NET使用ASP.NET实现一个功能,非javascript.<我的菜单在母版页,如何更改菜单点击后的效果>http://www.cnblogs.com/insus/ ...