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. 解决每次从cmd进入sqlplus，都得重新设置pagesize、linesize的问题

    https://blog.csdn.net/u012127798/article/details/34146143/ Oracle里的set零零碎碎的,这里整理归纳一下 SQL> set tim ...

  2. SQL学习指南第三篇

    再谈连接 外连接 之前的范例都是没有考虑条件可能无法为表中的所有行匹配的问题 左外连接与右外连接 SELECT a.account_id, a.cust_id, b.name FROM account ...

  3. java-查看java源码

    安装jdk后,自己的pc下自然而然就可以找到java的源码包.

  4. 【SVN】svn 查看项目的 svn 服务器地址目录（脱机状态下）

    #事故现场: 在无法连接到svn服务器地址的情况下,查看本地项目的svn的服务器地址目录: #事故分析 因为无法连接svn服务器,所以只能通过svn在本地存储的信息来获取svn的地址路径信息: #解决 ...

  5. Entity Framework入门教程（11)---EF6中的异步查询和异步保存

    EF6中的异步查询和异步保存 在.NET4.5中介绍了异步操作,异步操作在EF中也很有用,在EF6中我们可以使用DbContext的实例进行异步查询和异步保存. 1.异步查询 下边是一个通过L2E语法 ...

  6. C#获取应用程序路径

    string s = Environment.CurrentDirectory; //需添加Forms.DLL s = System.Windows.Forms.Application.Startup ...

  7. stm32F10x复习-1

    地点:家 1.库文件说明 _htmresc: LOGO的设计图 Libraries: 源代码及启动文件 -- CoreSupport 核内设备函数层的CM3核通用的源文件.作用是为采用Cortex-M ...

  8. 集合-Collections工具

    1.定义 Collections是集合类的一个工具类,它提供了一系列静态方法用于对容器中的元素进行排序和搜索等一系列操作. 注:Collection是一个集合接口,而Collections是一个有着操 ...

  9. monkey测试 -- 原理和操作步骤

     Monkey测试原理: Monkey是Android中的一个命令行工具,可以运行在模拟器里或实际设备中.它向系统发送伪随机的用户事件流(如按键输入.触摸屏输入.手势输入等),实现对正在开发的应用程序 ...

  10. [Kubernetes]yaml文件详解

    应前一段时间夸下的海口:[Kubernetes]如何使用yaml文件使得可以向外暴露服务,说过要写一篇关于yaml文件详解的文章出来的,今天来总结一下.yaml文件用在很多地方,但是这里以介绍在Kub ...