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. Android下用Sqlite数据库存储数据

    第一步:  写个类 ,继承 SQLiteOpenHelper public class MyDatabaseOpenHelper extends SQLiteOpenHelper { } 第二步:   ...

  2. JSP -- 从甲骨文开始

    1.Oracle10gForVistaX64下载地址:http://download.oracle.com/otn/nt/oracle10g/10204/10204_vista_w2k8_x64_pr ...

  3. 自制“低奢内”CSS3登入表单，包含JS验证，请别嫌弃哦。

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...

  4. SpringMVC之类型转换

    在数据绑定上,SpringMVC提供了到各种基本类型的转换,由前端到后台时,SpringMVC将字符串参数自动转换为各种基本类型.而对于其他,则需要自己编写代码进行转换.本随笔以转换时间类型为例,使用 ...

  5. ansible 角色登陆

    用ansible 来管理远程的主机,最大的好处是方便,ansible不用在远程的主机上安装ansible的客户端,ansible只要能通过ssh连接上远程主机就 能对它进行管理.也就是说ansible ...

  6. 老司机的应用级监控——spring actuator（转）

    转自:https://www.jianshu.com/p/c043d3c71f47 什么是spring actuator? 这是一个研发老司机与运维同学都会非常喜欢的东西,随着点融集团的扩张,点融网的 ...

  7. Java @Repeatable

    查看@PropertySource注解时候,发现了@Repeatable,从来没见过的注解,学习了下: 首先介绍下@Repeatable注解: JDK1.8出现的,作用是解决一个类上不能标注重复的注解 ...

  8. MVC应用程序实现会员登录功能

    实现之前,我们已经把验证成功的信息存在cookie里<MVC登录前准备写好cookie>http://www.cnblogs.com/insus/p/3464105.html.现在就可以实 ...

  9. JS DOM操作 函数 事件 阻止事件冒泡

    一 函数 1.字符串函数 s.tolowerCase( ):    -- 变小写 s.toupperCase( ):   -- 变大写 s.substr( 2 , 8 ):     -- 截取     ...

  10. C# 函数 递归

    函数:独立完成某项功能的一个个体,有固定功能函数有 高度抽象函数. 作用: 提高代码的重用性 提高功能开发的效率 提高程序代码的可维护性 函数四要素:   输入       输出       函数名  ...