Django——Ajax

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))
posted @ 2018-08-24 23:58  YanceDev  阅读(334)  评论(0)  编辑  收藏  举报