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. ZOJ3874 Permutation Graph 【分治NTT】

    题目链接 ZOJ3874 题意简述: 在一个序列中,两点间如果有边,当且仅当两点为逆序对 给定一个序列的联通情况,求方案数对\(786433\)取模 题解 自己弄了一个晚上终于弄出来了 首先\(yy\ ...

  2. 有序数列第K小

    有序数列第K小 题目描述 给出两个长度分别为\(n,m\)的单调非递减数列,求出它们合并后的第\(k\)小值. 输入输出格式 输入格式: 第一行三个数,\(n,m,k\)如题意所述: 第二行\(n\) ...

  3. 信息工程学院技能大赛 计算机程序设计(Java)大赛试题

    前期准备与后期上传工作: (1)必须先建立项目和包,项目名为"JavaContest",包结构为:"contest.c+序号+姓名",其中序号为两位为本人大赛报 ...

  4. [LOJ 6004] 圆桌聚餐

    link 其实网络流就是再考你如何去建边. 先见$S$,$T$为源点与汇点,然后将$S$连向每一个单位,流量为每个单位的人数,然后将每一个单位连向每一个餐桌,流量为$1$,最后在将每一个餐桌与$T$相 ...

  5. 修改tomcat编码格式 & tomcat发布WEB项目供外网访问

    1.修改tomcat默认编码格式: 修改tomcat下的conf/server.xml文件,找到如下代码:       <Connector port="8080" prot ...

  6. BigDATA面试题

    Big Data 面试题总结 JAVA相关 1-1)List 与set 的区别? 老掉牙的问题了,还在这里老生常谈:List特点:元素有放入顺序,元素可重复 ,Set特点:元素无放入顺序,元素不可重复 ...

  7. HDU 4348 主席树区间更新

    To the moon Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  8. 【题解】Weird journey Codeforces 788B 欧拉路

    传送门:http://codeforces.com/contest/788/problem/B 好题!好题! 首先图不连通的时候肯定答案是0,我们下面讨论图联通的情况 首先考虑,如果我们每条边都经过两 ...

  9. bzoj 1179 [Apio2009]Atm 缩点+最短路

    [Apio2009]Atm Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 4290  Solved: 1893[Submit][Status][Dis ...

  10. PHP扩展--Oracle客户端（oci8）安装

    下载Oracle客户端 官方下载地址: Linux X86-64 同意协议,下载以下文件: oracle-instantclient11.2-basic-11.2.0.4.0-1.x86_64.rpm ...