1. 简单的加法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<input type="text" name="a" id="a"><span>+</span><input type="text" name="b" id="b">

<button class="action">=</button>

<input type="text" name="sum" id="c">

<script src="jquery-3.2.1.min.js"></script>

<script>

    $(".action").click(function () {

        a = parseInt($("#a").val());

        b = parseInt($("#b").val());

        c=a+b;

        $.ajax($("#c").val(c))

    })

</script>

</body>

</html>

2.  用户登录验证

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<a href="/get_OK/">点击</a><span class="error"></span>

<p>姓名：<input type="text" name="name"></p>

<p>密码：<input type="password" name="pwd"></p>

<span class="login_error"></span>

<p>

    <button class="Ajax_send">Ajax_send</button>

</p>

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

<script>

    $(".Ajax_send").click(function () {

        // ajax请求

        $.ajax({

            url: "/get_ajax/",

            type: 'GET',

            data: JSON.stringify({

                name: $(":text").val(),

                pwd: $(":password").val()

            }),

            contentType:"application/json",

            success: function (data) {

                console.log(data);

                var data=JSON.parse(data);

                if(!data){

                    $(".login_error").html('用户名或密码错误');

                }

            }

        })

    })

</script>

</body>

</html>

3. 视图函数

import json

from django.shortcuts import render,redirect,HttpResponse

# Create your views here.

def index(request):

    return render(request,'index.html')

def get_OK(request):

    return render(request,'get_OK.html')

def get_ajax(request):

    username=request.GET.get('name')

    password=request.GET.get('pwd')

    flag=False

    if username=="yuan" and password =='123':

        flag =True

    return HttpResponse(json.dumps(flag))

3.  参数说明：

######################------------data---------################

       data: 当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式

             (urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。

             function testData() {

               $.ajax("/test",{     //此时的data是一个json形式的对象

                  data:{

                    a:1,

                    b:2

                  }

               });                   //?a=1&b=2

######################------------processData---------################

processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，

             那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString()

             ,最后得到一个［object，Object］形式的结果。

######################------------contentType---------################

contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

             用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据，

             比如contentType:"application/json"，即向服务器发送一个json字符串：

               $.ajax("/ajax_get",{

                  data:JSON.stringify({

                       a:22,

                       b:33

                   }),

                   contentType:"application/json",

                   type:"POST",

               });                          //{a: 22, b: 33}

             注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象

######################------------traditional---------################

traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]},

              traditional为false会对数据进行深层次迭代；

待续.. ...　　

　　

　　

　

Django Ajax学习一的更多相关文章

  1. Django Ajax学习二之文件上传

    基于Django实现文件上传 1. url路由配置 路径:C:\Users\supery\Desktop\day82\demo_ajax\demo_ajax\urls.py from django.c ...

  2. Django Ajax学习二之csrf跨站请求伪造

    方式1 $.ajaxSetup({ data: {csrfmiddlewaretoken: '{{ csrf_token }}' }, }); 方式2 # html文件from表单中<form& ...

  3. python学习-- Django Ajax CSRF 认证

    使用 jQuery 的 ajax 或者 post 之前 加入这个 js 代码:http://www.ziqiangxuetang.com/media/django/csrf.js /*======== ...

  4. 关于Django Ajax CSRF 认证

    CSRF(Cross-site request forgery跨站请求伪造,也被称为“one click attack”或者session riding,通常缩写为CSRF或者XSRF,是一种对网站的 ...

  5. Django：学习笔记(8)——文件上传

    Django:学习笔记(8)——文件上传 文件上传前端处理 本模块使用到的前端Ajax库为Axio,其地址为GitHub官网. 关于文件上传 上传文件就是把客户端的文件发送给服务器端. 在常见情况(不 ...

  6. Django中间件、csrf跨站请求、csrf装饰器、基于django中间件学习编程思想

    django中间件 中间件介绍 什么是中间件? 官方的说法:中间件是一个用来处理Django的请求和响应的框架级别的钩子.它是一个轻量.低级别的插件系统,用于在全局范围内改变Django的输入和输出. ...

  7. Ajax学习心得

    Ajax学习心得 大致学了下Ajax,才知道它不是某种编程语言,而是一种在无需加载整个页面的情况下能够更新部分网页的技术.了解了它的功能后觉得这真是一种好的技术,这得给前端和运维省多少力啊! 传统的网 ...

  8. Django快速学习搭建blog项目

    新手学习Django,本文学习的文档是<Django Web开发指南>.好了我也是新手,没什么好说了,go!- 首先先确定环境,我是在linux(Ubuntu14.04 gnome)下. ...

  9. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

随机推荐

  1. 1 Easy Read/Write Splitting with PHP’s MySQLnd

    以下均是使用翻译软件翻译的! Note: This is part one in our Extending MySQL with PHP's MySQLnd Series, read part 2 ...

  2. scanf函数用法小记

    By francis_hao    Aug 26,2017   scanf – 输入格式转换   概述 #include <stdio.h>int scanf(const char *fo ...

  3. 管理页面的 setTimeout & setInterval

    在管理 setTimeout & setInterval 这两个 APIs 时,笔者通常会在顶级(全局)作用域创建一个叫 timer 的对象,在它下面有两个数组成员 —— {sto, siv} ...

  4. cin.get()、流和缓冲区

    大家好,这是我在CSDN的第一篇博客.我是一名学习GIS专业的大学生.我从小开始喜欢编程,可是到现在编程水平却长进不大,依然是菜鸟一个.究其原因,虽然这些年乱七八糟的东西学过不少,但是总的来说还是基础 ...

  5. FreeMarker + xml 导出word

    转载自:http://hongqiang.iteye.com/blog/1632998 首先介绍几种java导出word方案 1.Jacob是Java-COM Bridge的缩写,它在Java与微软的 ...

  6. Java设计模式の适配器模式

    定义 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作. 适配器模式的用途 用电器做例子,笔记本电脑的插头一般都是三相的,即除了阳极 ...

  7. 状压DP的总结

    状压dp的标志 ①数据小 ②通过题目所给出的条件以后得到的特征集合小 一:CF259div2 D: 题目大意:保证b[i]中每个数互质,给出a[i],然后求1~n的abs(a[i]-b[i])最小.a ...

  8. 【C++ STL】List

    1.结构 list使用一个double linked list(双向链表)来管理元素. 2. list 能力 list内部结构和vector或deque截然不同,所以与他们的区别: list不支持随机 ...

  9. c# bootstrap-table 知识

    bootstrap-table 提供手机端,电脑端访问,提供分页,筛选等. bootstrap-table说明文档:http://bootstrap-table.wenzhixin.net.cn/zh ...

  10. 【BZOJ4864】神秘物质 [Splay]

    神秘物质 Time Limit: 10 Sec  Memory Limit: 256 MB Description Input Output Sample Input Sample Output 1 ...