码迷,mamicode.com
首页 > Web开发 > 详细

Django——Ajax

时间:2018-08-25 11:24:07      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:pass   页面   cts   需要   ons   BMI   https   1.2   set   

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

标签:pass   页面   cts   需要   ons   BMI   https   1.2   set   

原文地址:https://www.cnblogs.com/huang-yc/p/9532533.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!