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. c语言计算过程中的过程转换

    graph BT float==>double; id1[char, short]==>int; int-->unsigned unsigned-->long long--&g ...

  2. Unity 阴影的制作方式

    Unity阴影制作的三种方式. 方式一:Light中Shadow Type的类型 包括Hard Shadows.Soft Shadows.No Shadows:  Mesh Renderer中的属性 ...

  3. mybatis的if判断integer

    昨天在使用mybatis的if判断integer时遇见一个小问题: <if test="isChoose != null and isChoose != '' and isChoose ...

  4. 包管理工具之Pipenv

    pipenv 都包含什么? pipenv 是 Pipfile 主要倡导者.requests 作者 Kenneth Reitz 写的一个命令行工具,主要包含了Pipfile.pip.click.requ ...

  5. [物理学与PDEs]第1章第6节 电磁场的标势与矢势 6.3 例 --- 电偶极辐射

    1. 偶极子: 相距为 $l$, 带电量分别为 $\pm q$ 的一对电荷组成的系统. 称 $$\bex {\bf m}=q{\bf l} \eex$$ 为电偶极矩, 其中 ${\bf l}$ 为 $ ...

  6. Scrapy 入门

    Scrapy https://docs.scrapy.org/en/latest/intro/overview.html Scrapy is an application framework for ...

  7. 计算int数组中的最大，最小，平均值

    public static void testNumber(int[] arr) { int max = arr[0]; int min = arr[0]; int avg = 0; int sum ...

  8. angularjs指令中的compile与link函数详解补充

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...

  9. [好文mark] 深度学习中的注意力机制

    https://cloud.tencent.com/developer/article/1143127

  10. unity setactive的使用

    1.可以用本身移出布局来实现隐藏 2.RawImage的texture的设置生成的一定要及时消除,避免内存泄漏