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. ubuntu16.04+cuda9+cudnn7+tensorflow+pycharm环境搭建

    安装环境:ubuntu16.04+cuda9+cudnn7+tensorflow+pycharm 1)前期搭建过程主要是按照这篇博文,对于版本选择,安装步骤都讲得很详细,亲测有效! https://b ...

  2. css实现文本两端对齐

    display:inline-block; text-align:center; text-align-last:justify;

  3. linux系统无法启动或无法登入

    修改root权限: https://blog.csdn.net/houjue2298/article/details/78539827 修改密码: https://www.cnblogs.com/we ...

  4. IrisSkin 单独控件样式设置 不使用皮肤样式

    可以设置控件的Tag为this.skinEngine1.DisableTag [DefaultValue()] [Description("If you do not want skin t ...

  5. GoLang-Rpc编程

    Rpc定义: RPC(Remote Procedure Call,远程过程调用)是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络细节的应用程序通信协议. RPC协议构建于TCP或UDP, ...

  6. 美化博客CSS

    title: 美化博客CSS date: 2019/01/19 14:28:59 --- 美化博客CSS 可以去这里看下好看的样式 修改下文档的css,博客园是在页面定制CSS代码,我这里修改了下标题 ...

  7. usb的hid鼠标键盘报告描述符(五)

    title: usb的hid鼠标键盘报告描述符 tags: linux date: 2018/12/20/ 18:05:08 toc: true --- usb的hid鼠标键盘报告描述符 https: ...

  8. vue 开发微信小程序

    介绍 mpvue (github 地址请参见)是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,mpvue 修改了 Vue.js的 runtime 和 compiler 实 ...

  9. word中中文保持正体,英文用斜体的方法.

    有时候,大段的文字中夹杂着英文字母,英文需要斜体,如果一个接一个选中再斜体,费时费力,那么怎样快速实现文斜体中文不斜体呢? 工具/原料 word软件 方法/步骤 选中要修改的段落,替换-查找内容-特殊 ...

  10. Vue Material

    Material Design是什么? https://www.zhihu.com/topic/20005114/top-answers 我们挑战自我,为用户创造了崭新的视觉设计语言.与此同时,新的设 ...