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初识Helloworld

    在Eclipse+ADT中创建HelloWorld非常简单,直接按照导航下一步就可以了.本文重点不在如何创建,而在理解HelloWorld项目的文件. HelloWorld的目录结构有: src:存放 ...

  2. JavaSE-序列化和反序列化

    什么是序列化,什么时候要进行序列化? 序列化就是一种用来处理对象流的机制,所谓对象流也就是将对象的内容进行流化,将数据分解成字节流,以便存储在文件中或在网络上传输. 我们在对java对象进行IO流操作 ...

  3. wordpress给文章添加缩略图

    百度是个好东西,翻了半个小时的文章,终于把这个问题解决了. 一个问题的解决方法很多,但要找到一个自己理解的方法,缺比较难找,不管怎样,多动手,可能弄着弄着就会了. 教程开始: 1.先去后台管理安装Ea ...

  4. Redis+Jedis封装工具类

    package com.liying.monkey.core.util; import java.io.IOException; import java.util.ArrayList; import ...

  5. mysql的sql执行计划详解（非常有用）

    以前没有怎么了解mysql执行计划,以及sql 优化方面,今天算学习了. https://blog.csdn.net/heng_yan/article/details/78324176 https:/ ...

  6. spring boot 与 thymeleaf (4): 基本对象、工具类对象

    如果在前台, 我需要获取session中的信息, 或者需要获取url中的参数信息, 是不是需要在后台手动处理好, 然后放到Model中去, 在前台通过${}来取呢? 当然, 这种方式, 是可以的, 但 ...

  7. centos7 安装配置postgresql

    考:https://www.linuxidc.com/Linux/2017-10/147536.htm http://blog.51cto.com/12482328/2090844 https://w ...

  8. 让IIS Express 也支持外部链接

  9. vs code 插件收集

    名称 简述 Auto Close Tag 自动闭合HTML标签 Auto Import Typescript自动import提示 Auto Rename Tag 修改HTML标签时,自动修改匹配的标签 ...

  10. Hibernate里面如何使用DetachedCriteriaCriteria 实现多条件分页查询

    WEB层: // 获取分页的请求参数 String start = request.getParameter("start"); String page = request.get ...