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. HDOJ(HDU).1058 Humble Numbers (DP)

    HDOJ(HDU).1058 Humble Numbers (DP) 点我挑战题目 题意分析 水 代码总览 /* Title:HDOJ.1058 Author:pengwill Date:2017-2 ...

  2. JavaScript非阻塞加载脚本

    As more and more sites evolve into “Web 2.0″ apps, the amount of JavaScript increases. This is a per ...

  3. bzoj 2654 tree 二分+kruskal

    tree Time Limit: 30 Sec  Memory Limit: 512 MBSubmit: 2739  Solved: 1126[Submit][Status][Discuss] Des ...

  4. 查看自己电脑外网IP

    连着wifi,在CMD窗口中显示的无线局域网适配器IP很有可能是内网IP.此时可以通过下面方法查看自己的电脑外网IP. 1.前提条件可以上外网: 2.上外网百度,输入IP,进行搜索. 3.查看结果即可 ...

  5. 深入HBase架构解析（一）

    前记 公司内部使用的是MapR版本的Hadoop生态系统,因而从MapR的官网看到了这篇文文章:An In-Depth Look at the HBase Architecture,原本想翻译全文,然 ...

  6. word2vec Explained: deriving Mikolov et al.'s negative-sampling word-embedding method

    最近接到任务研究word2vec,感觉网络上关于这个的资料层次不齐,总感觉解释的都没有那么完善.或许就连作者本人也不是非常清楚为什么他的模型好使.论文中提到的negtive sampling给了我很大 ...

  7. 省队集训Day1 总统选举

    [题目大意] 一个$n$个数的序列,$m$次操作,每次选择一段区间$[l, r]$,求出$[l, r]$中出现超过一半的数. 如果没有超过一半的数,那么就把答案钦定为$s$,每次会有$k$个数进行改变 ...

  8. vue双向绑定原理源码解析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/maxlove123 ...

  9. 移动端 H5 页面注意事项

    1. 单个页面内容不能过多 设计常用尺寸:750 x 1334 / 640 x 1134,包含了手机顶部信号栏的高度. 移动端H5活动页面常常需要能够分享到各种社交App中,常用的有 微信.QQ 等. ...

  10. spring boot web 入门

    ① 新建一个maven项目. ② pom中parent设为 spring-boot-starter-parent .建议使用最新的 RELEASE 版本.否则可能需要设置 <repositori ...