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. django系列3 :创建模型

    1创建模型 在我们简单的民意调查应用程序中,我们将创建两个模型:Question和Choice.A Question有问题和出版日期.A Choice有两个字段:选择的文本和投票记录.每个Choice ...

  2. C#图片操作公共库

    存一下,以后找起来方便 包括图片加载.压缩.base64等 public static class ImageFun { #region 图片 public static EncoderParamet ...

  3. SQL随记(二)

    1.purge关键字:可以清除oracle 回收站(recyclebin)中的表和索引并释放与其相关的空间,还可清空回收站,或者清除表空间中记录的已删除的部分表空间.但是purge后不能回滚和恢复. ...

  4. golang命令行库cobra使用

    github地址:https://github.com/spf13/cobra Cobra功能 简单子命令cli 如  kubectl verion    kubectl get 自动识别-h,--h ...

  5. Form -- 文件上传

    当我们选中文件,点击上传时即可. 而此按钮一般是一张图片覆盖了一个input标签而以.基于这个原理我们可以定制自己喜欢的样式 <div style="text-align: cente ...

  6. [物理学与PDEs]第3章第3节 电导率 $\sigma$ 为无穷时的磁流体力学方程组 3.3 磁场线``冻结''原理

    磁场线``冻结''原理: 在 $\sigma=\infty$ 时, 初始时刻分布在同一磁场线上的质点, 在运动过程中会一直保持在同一磁场线上, 即磁场线好像``冻结''在物质上. 事实上, $\cfr ...

  7. [物理学与PDEs]第1章第8节 静电场和静磁场 8.3 静磁场

    1. 静磁场: 由稳定电流形成的磁场. 2. 此时, Maxwell 方程组为 $$\beex \bea \Div{\bf D}&=\rho_f,\\ \rot {\bf E}&={\ ...

  8. windows bat 脚本(一)切换当前目录

    一.切换当前目录 现在桌面新建一个文件, 然后打开输入 cmd /k "cd /d D:\file"    如下图点击“另存为”,保存类型选择 “所有文件” 然后会在保存路径下发现 ...

  9. Rich feature hierarchies for accurate object detection and semantic segmentation（理解）

    0 - 背景 该论文是2014年CVPR的经典论文,其提出的模型称为R-CNN(Regions with Convolutional Neural Network Features),曾经是物体检测领 ...

  10. C++的一些小Tip

    string转数字: 一种是转换为char*后再使用atoi:atoi(s.c_str()).这个方法的神奇之处在于,如果s是负数也能顺利转化,但是,在leetcode显示,自己先判断是不是负数的话计 ...