1.Ajax简介

AJAX（Asynchronous Javascript And XML)——“异步的JavaScript与XML”。

Ajax使用Javascript语言与服务器进行异步的交互，传输的数据为XML（时至今日，传输的数据更多为Json格式）。

同步交互与异步交互

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

Ajax的特点：

  1. 异步交互
  2. 浏览器页面局部刷新

Ajax的优点：

  1. Ajax使用Javascirpt向服务器发送异步请求
  2. Ajax无须刷新整个页面

2.基于jQuery的Ajax实现

2.1 最基础的Ajax代码实现

2.1.1模板

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

    </script>

</head>

<body>

<div class="content"></div>

<button class="Ajax">Ajax</button>

<script>

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

        $.ajax({

                url: '/test/',

                type: 'get',

                success: function (data) {

                    $('.content').html(data)

                }

            }

        )

    })

</script>

</body>

</html>

2.1.2 视图

from django.shortcuts import render,HttpResponse

# Create your views here.

def index(request):

    return render(request,'index.html')

def test(request):

    return HttpResponse('hello Ajax')

实现效果：

2.2基于Ajax的计算器

2.2.1模板

<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="ret"><button class="cal">计算</button>

 $('.cal').click(function () {

        $.ajax({

            url:'/cal/',

            type:'post',

            data:{

                'n1':$('#num1').val(),

                'n2':$('#num2').val(),

            },

            success:function (data) {

                console.log(data);

                $('#ret').val(data);

            }

        })

    })

2.2.2视图

def cal(request):

    print(request.POST)

    n1 = int(request.POST.get('n1'))

    n2 = int(request.POST.get('n2'))

    ret = n1+n2

    return HttpResponse(ret)

实现效果：

2.3基于Ajax的登陆组件

2.3.1模板

<form >

    用户名 <input type="text" id="user">

    密码 <input type="password" id="pwd">

    <input type="button" value="submit" class="login_btn"><span class="error"></span>

</form>

 $('.login_btn').click(function () {

        $.ajax({

            url:"/login/",

            type:'post',

            data:{

                'user':$('#user').val(),

                'pwd':$('#pwd').val(),

            },

            success:function(data){

                console.log(data);

                console.log(typeof data);

                var data=JSON.parse(data);

                console.log(data);

                console.log(typeof data);

                if (data.user){

                    location.href='http://www.baidu.com'

                }

                else {

                    $(".error").html(data.msg).css({"color":'red',"margin-left":'10px'})

                }

            }

        })

    })

2.3.2视图

def login(request):

    print(request.POST)

    user=request.POST.get("user")

    pwd=request.POST.get('pwd')

    user= User.objects.filter(name=user,pwd=pwd).first()

    res= {"user":None,"msg":None}

    if user:

        res["user"] = user.name

    else:

        res["msg"]= "username or password wrong!"

    import json

    return HttpResponse(json.dumps(res))

Django——Ajax的更多相关文章

  1. Django ajax MYSQL Highcharts<1>

    Another small project with django/Ajax/Mysql/Highcharts. 看下效果图  - delivery dashboard .嘿嘿 是不是还蛮好看的. 废 ...

  2. django ajax练习

    这几天遇到了django ajax请求出错的问题,总结一下 前端js:我这里创建的是一个字典格式的数据,前端js收到字典之后也是要用字典的形式去解包后台传送过来的数据,比如我下面的写法:data['s ...

  3. 关于Django Ajax CSRF 认证

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

  4. django ajax增 删 改 查

    具于django ajax实现增 删 改 查功能 代码示例: 代码: urls.py from django.conf.urls import url from django.contrib impo ...

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

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

  6. django ajax 及批量插入数据 分页器

    ``` Ajax 前端朝后端发送请求都有哪些方式 a标签href GET请求 浏览器输入url GET请求 form表单 GET/POST请求 Ajax GET/POST请求 前端朝后端发送数据的编码 ...

  7. django ajax提交form表单数据

    后台: from django.shortcuts import render from django.shortcuts import redirect from django.shortcuts ...

  8. Django ajax提交 登录

    一.url from django.contrib import adminfrom django.urls import pathfrom appo1 import views urlpattern ...

  9. django ajax报错解决：You called this URL via POST, but the URL doesn't end in a slash and you have APPEND_SLASH set.

    Django版本号:1.11.15 django中ajax请求报错:You called this URL via POST, but the URL doesn't end in a slash a ...

随机推荐

  1. SyntaxError: Unexpected token ' in JSON at position 2

    js中字符串转json对象时报错: Uncaught SyntaxError: Unexpected token s in JSON at position 2 解决方法: js中获取jsp的返回值 ...

  2. building tool的简单了解

    java常用的三种构建工具: Apache Maven ——主要用于构建Java项目的自动化工具. NetBeans IDE 支持 Maven 构建系统,可帮助您管理项目的依赖关系.构建.报告和文档. ...

  3. Docker：手动制作镜像 [五]

    一.制作docker镜像的步骤 1.启动容器安装软件服务 2.将安装好服务的容器commit提交为镜像 3:.启动新容器来测试新提交的镜像 二.制作支持ssh远程登录的docker镜像 1.启动容器安 ...

  4. ACM-ICPC 2018 徐州赛区网络预赛 H Ryuji doesn't want to study (树状数组差分)

    https://nanti.jisuanke.com/t/31460 题意 两个操作.1:查询区间[l,r]的和,设长度为L=r-l+1, sum=a[l]*L+a[l+1]*(L-1)+...+a[ ...

  5. [译]Ocelot - Logging

    原文 Ocelot使用标准的日志接口ILoggerFactory和ILogger<T>.它们封装在IOcelotLogger 和 IOcelotLoggerFactory中,因为ocelo ...

  6. SQL注入绕过技巧总结

    1.SQL注入过程中的处理# 终端payload编码------>web服务器解码-------->CGI脚本解码------>web应用解码----->数据库解码 浏览器.代 ...

  7. Codeforces 1097G

    根本想不到 CF1097G 题意 给出一棵树,定义f(S)为用最少的边连通点集$ S$的边数 求$ \sum\limits f(S)^k$ $ n \leq 10^5 k \leq 200$ 题解 假 ...

  8. Linux 踩过的坑系列-01

    关于默认网关的添加.记得楼主之前有一次,无意之间,也不知道做了什么删除文件里面内容的操作,配置好静态IP之后上不了外网.翻阅个各种资料都是没有找到问题.最后发现问题在于配置的虚拟机网卡文件的网关打错了 ...

  9. (一)Java工程化--Maven基础

    Maven 读作['mevən] 翻译成中文是"内行,专家" Maven是什么 包依赖的前世今生: 原始的jar包引用--> ant --> maven. 是一种项目管 ...

  10. docker创建Redis集群

    开始工作: yum install wegt ##安装下载工具 yum install net-tools ##安装网络工具 yum install tree ##安装tree命令(方便查看集群配置文 ...