django系列6--Ajax01 特色, 基本格式, 向前端发送数据

时间 2020-07-25

标签 django 系列 ajax01 ajax 特色基本格式向前发送数据栏目 Python 繁體版

原文原文链接

一.Ajax了解

AJAX（Asynchronous Javascript And XML）优势是在不从新加载整个页面的状况下,能够与服务器交换数据并更新部分网页内容javascript

优势:html

1.ajax使用JavaScript技术向服务器发送异步请求前端

2.ajax请求无需刷新整个页面(浏览器局部刷新)java

3.服务器响应内容再也不是整个页面,而是页面中的部份内容,因此ajax性能高python

二.Ajax使用

基本格式jquery

//基于按钮点击事件实现的
<script src="{% static 'js/jquery.js' %}"></script>
<script>
    $('#sub').click(function () {
    
        //$.ajax({键值对参数})
        $.ajax({
            url:"{% url 'login' %}",
            type:'post',
            data:{'username':uname,'pwd':pwd,'csrfmiddlewaretoken':csrf_token},
            success:function (response) {  // response这个参数名字是自定义的

            }
        })
    })

</script>

1.jQuery的实现ajax

<button class="send_Ajax">send_Ajax</button>
<script>

       $(".send_Ajax").click(function(){

           $.ajax({
               url:"/handle_Ajax/",
               type:"POST",
               data:{username:"tom",password:123},
               success:function(data){
                   console.log(data)
               },
         　　　　　　
               error: function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    },

               complete: function (jqXHR, textStatus) {
                        console.log(textStatus);
                },

               statusCode: {
                    '403': function (jqXHR, textStatus, err) {
                          console.log(arguments);
                     },

                    '400': function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    }
                }

           })

       })

</script>

2.原生Js实现django

var bt2 = document.getElementById("bt2");
  bt2.onclick = function () {
    // 原生JS
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("POST", "/ajax_test/", true);
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.send("username=tom&password=123");
    xmlHttp.onreadystatechange = function () {
      if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
        alert(xmlHttp.responseText);
      }
    };
  };

三.使用ajax传送数据

用一个简单的登陆验证明例来讲明,用户名和密码正确提示成功.不然显示失败json

发送的数据若是是字典时,其中的引号必须是双引号,不然传到前端使用会报错,浏览器

如{ “data”: data } , 不要用{‘data’: data}

1.使用 JsonResponse 来发送数据(最好)

这样发送的数据,前端就不用解析了,能够直接看成对象来使用

views.py

from django.shortcuts import render,redirect,HttpResponse
from django.http import JsonResponse
from app01 import models

# Create your views here.
def login(request):
    if request.method == 'POST':
        username = request.POST.get("username")
        password = request.POST.get("password")
        print(username, password)
        ret = models.Userinfo.objects.filter(username=username,password=password)
        print(ret)
        a = {"status":None}
        if ret:
            a["status"] = True
            print(a)
            return JsonResponse(a)
        else:
            return HttpResponse("fail")
    else:
        return render(request,"login.html")

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% csrf_token %}
用户名: <input type="text" id="username">
密码: <input type="password" id="password">
<button id="sub">登录</button>
<span id="mag" style="color: red;font-size: 12px;"></span>


<script src="{% static 'js/jquery.min.js' %}"></script>
<script>
    $("#sub").click(function () {
        var uname = $("#username").val();
        var pwd = $("#password").val();
        var csrf_token = $("input[name=csrfmiddlewaretoken]").val();
        $.ajax({
            url:"{% url 'login' %}",
            type:"post",
            data:{"username":uname,"password":pwd,"csrfmiddlewaretoken":csrf_token},
            success:function (response) {
                console.log(response, typeof response);
                if (response.status){
                    $("span").text("登录成功");
                }else{
                    $("span").text("失败");
                }
            }
            }
        )
    })

</script>

</body>
</html>

2.使用HttpResponse来向前端发送消息

HttpResponse加一个头就能够了,这样使用HttpResponse(data, content_type=content_type='application/json')

这样在前端html页面就不用解析json格式了,能够直接做为对象调用数据

views.py

from django.shortcuts import render,redirect,HttpResponse
from django.http import JsonResponse
from app01 import models
import json


# Create your views here.
def login(request):
    if request.method == 'POST':
        username = request.POST.get("username")
        password = request.POST.get("password")
        print(username, password)
        ret = models.Userinfo.objects.filter(username=username,password=password)
        print(ret)
        a = {"status":None}
        if ret:
            a["status"] = True
            print(a)
            msg = json.dumps(a)
            return HttpResponse(msg, content_type='application/json')
        else:
			msg = json.dumps(a)
            return HttpResponse(msg, content_type='application/json')
    else:
        return render(request,"login.html")

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% csrf_token %}

用户名: <input type="text" id="username">
密码: <input type="password" id="password">
<button id="sub">登录</button>
<span id="mag" style="color: red;font-size: 12px;"></span>

<script src="{% static 'js/jquery.min.js' %}"></script>  # 经过别名引入静态文件
<script>
    $("#sub").click(function () {
        var uname = $("#username").val();
        var pwd = $("#password").val();
        var csrf_token = $("input[name=csrfmiddlewaretoken]").val();
        $.ajax({
            url:"{% url 'login' %}",
            type:"post",
            data:{"username":uname,"password":pwd,"csrfmiddlewaretoken":csrf_token},
            success:function (response) {
                console.log(response, typeof response);
                
                if (response.status){
                    $("span").text("登录成功");
                }else{
                    $("span").text("失败");
                }
            }
            }
        )
    })

</script>

</body>
</html>

3.引入json模块,发送json格式的消息

向前端发送的是json格式的消息,因此在前端要用JSON.parse()来反序列化字符串为JSON对象以后才能使用

views.py

from django.shortcuts import render,redirect,HttpResponse
from app01 import models
import json


# Create your views here.
def login(request):
    if request.method == 'POST':
        username = request.POST.get("username")
        password = request.POST.get("password")
        print(username, password)
        ret = models.Userinfo.objects.filter(username=username,password=password)
        print(ret)
        a = {"status":None}
        if ret:
            a["status"] = True
            print(a)  # {'status': True}
            msg = json.dumps(a)
            return HttpResponse(msg)
        else:
            return HttpResponse(a)
    else:
        return render(request,"login.html")

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% csrf_token %}
用户名: <input type="text" id="username">
密码: <input type="password" id="password">
<button id="sub">登录</button>
<span id="mag" style="color: red;font-size: 12px;"></span>

<script src="{% static 'js/jquery.min.js' %}"></script>
<script>
    $("#sub").click(function () {
        var uname = $("#username").val();
        var pwd = $("#password").val();
        var csrf_token = $("input[name=csrfmiddlewaretoken]").val();
        
        $.ajax({
            url:"{% url 'login' %}",
            type:"post",
            data:{"username":uname,"password":pwd,"csrfmiddlewaretoken":csrf_token},
            success:function (response) {
                console.log(response, typeof response);
                msg = JSON.parse(response);  
                if (msg.status){
                    $("span").text("登录成功");
                }else{
                    $("span").text("失败");
                }
            }
            }
        )
    })
</script>

</body>
</html>

实现结果: