1. 简单的加法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.  
  9. <input type="text" name="a" id="a"><span>+</span><input type="text" name="b" id="b">
  10. <button class="action">=</button>
  11. <input type="text" name="sum" id="c">
  12.  
  13. <script src="jquery-3.2.1.min.js"></script>
  14.  
  15. <script>
  16.     $(".action").click(function () {
  17.         a = parseInt($("#a").val());
  18.         b = parseInt($("#b").val());
  19.         c=a+b;
  20.         $.ajax($("#c").val(c))
  21.     })
  22. </script>
  23.  
  24. </body>
  25. </html>

2.  用户登录验证

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <a href="/get_OK/">点击</a><span class="error"></span>
  9.  
  10. <p>姓名：<input type="text" name="name"></p>
  11. <p>密码：<input type="password" name="pwd"></p>
  12. <span class="login_error"></span>
  13. <p>
  14.     <button class="Ajax_send">Ajax_send</button>
  15. </p>
  16.  
  17. <script src="/static/jquery-3.2.1.min.js"></script>
  18. <script>
  19.     $(".Ajax_send").click(function () {
  20.         // ajax请求
  21.  
  22.         $.ajax({
  23.             url: "/get_ajax/",
  24.             type: 'GET',
  25.             data: JSON.stringify({
  26.                 name: $(":text").val(),
  27.                 pwd: $(":password").val()
  28.             }),
  29.             contentType:"application/json",
  30.             success: function (data) {
  31.                 console.log(data);
  32.                 var data=JSON.parse(data);
  33.                 if(!data){
  34.                     $(".login_error").html('用户名或密码错误');
  35.                 }
  36.             }
  37.         })
  38.  
  39.     })
  40. </script>
  41.  
  42. </body>
  43. </html>

3. 视图函数

  1. import json
  2. from django.shortcuts import render,redirect,HttpResponse
  3.  
  4. # Create your views here.
  5.  
  6. def index(request):
  7.     return render(request,'index.html')
  8.  
  9. def get_OK(request):
  10.     return render(request,'get_OK.html')
  11.  
  12. def get_ajax(request):
  13.     username=request.GET.get('name')
  14.     password=request.GET.get('pwd')
  15.  
  16.     flag=False
  17.     if username=="yuan" and password =='123':
  18.         flag =True
  19.  
  20.     return HttpResponse(json.dumps(flag))

3.  参数说明：

  1. ######################------------data---------################
  2.  
  3.        data: 当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式
  4.              (urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。
  5.  
  6.              function testData() {
  7.                $.ajax("/test",{     //此时的data是一个json形式的对象
  8.                   data:{
  9.                     a:1,
  10.                     b:2
  11.                   }
  12.                });                   //?a=1&b=2
  13. ######################------------processData---------################
  14.  
  15. processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，
  16.              那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString()
  17.              ,最后得到一个［object，Object］形式的结果。
  18.  
  19. ######################------------contentType---------################
  20.  
  21. contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
  22.              用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据，
  23.              比如contentType:"application/json"，即向服务器发送一个json字符串：
  24.                $.ajax("/ajax_get",{
  25.  
  26.                   data:JSON.stringify({
  27.                        a:22,
  28.                        b:33
  29.                    }),
  30.                    contentType:"application/json",
  31.                    type:"POST",
  32.  
  33.                });                          //{a: 22, b: 33}
  34.  
  35.              注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象
  36.  
  37. ######################------------traditional---------################
  38.  
  39. traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]},
  40.               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).1003 Max Sum (DP)

    HDOJ(HDU).1003 Max Sum (DP) 点我挑战题目 算法学习-–动态规划初探 题意分析 给出一段数字序列,求出最大连续子段和.典型的动态规划问题. 用数组a表示存储的数字序列,sum ...

  2. Tomcat启动时报org.springframework.web.context.ContextLoaderListener错误解决方案

    问题现象:新从svn上检出maven的项目maven+spring+springmvc项目在Tomcat启动时,报如下错误. 严重: Error configuring application lis ...

  3. Android JUnit test

    Android单元测试步骤 1.修改AndroidManifest.xml文件. 添加instrumentation节点.其中name是固定值,targetPackage为需要测试的类所在的包.如:  ...

  4. Python爬虫学习笔记之极限滑动验证码的识别

    代码: import time from io import BytesIO from PIL import Image from selenium import webdriver from sel ...

  5. [SDOI2008]仪仗队 (洛谷P2158)

    洛谷题目链接:[SDOI2008]仪仗队 题目描述 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视 ...

  6. 命令行访问远程mysql数据库

    命令: mysql -u用户名 -p密码 -h远程数据库IP地址 -P端口 -D数据库名 例子: 使用用root帐号,密码为123456,登录ip地址为192.168.1.110,端口为3306,名称 ...

  7. yum快速安装gitlab

    安装gitlab前戏使用官方的源,还是比较慢的,gitlab官方提供了一个清华大学的源 新建 /etc/yum.repos.d/gitlab-ce.repo,内容为 源[gitlab-ce]name= ...

  8. 知问前端——cookie插件

    Cookie是网站用来在客户端保存识别用户的一种小文件.一般可以保存用户登录信息.购物数据信息等一系列微小信息. 一.使用cookie插件 官方网站:http://plugins.jquery.com ...

  9. 【Foreign】不等式 [数论]

    不等式 Time Limit: 10 Sec  Memory Limit: 128 MB Description 小z热衷于数学. 今天数学课的内容是解不等式:L<=S*x<=R .小z心 ...

  10. bzoj 1036: [ZJOI2008]树的统计Count——树链剖分

    Description 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w.我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. Q ...