一.Ajax了解

AJAX（Asynchronous Javascript And XML）优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容

优点:

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

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

3.服务器响应内容不再是整个页面,而是页面中的部分内容,所以ajax性能高

二.Ajax使用

基本格式

//基于按钮点击事件实现的

<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的实现

<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实现

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传送数据

用一个简单的登录验证实例来说明,用户名和密码正确提示成功.否则显示失败

发送的数据如果是字典时,其中的引号必须是双引号,否则传到前端使用会报错,

如{ “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")

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")

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")

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>

实现结果:

django系列6--Ajax01 特点, 基本格式, 向前端发送数据的更多相关文章

  1. 网络相关系列之三：通过GET和POST方法发送数据

    写在最前面:年少的安逸舒适在随着年龄的到来和现实生活的压迫总有一天会全数归还(事实上就是<无间道>中那句:"出来混,迟早要还的!") so fighting. 一.GE ...

  2. Django：前后端分离后联调给前端传数据

    实现前后端分离后,有了下面几点改变: 1.服务器一分为二,前后端分别部署,静态资源放在前端服务器,业务代码放在后的服务器 2.前端服务器需要接收Http请求(一般使用node.js) 3.前端服务器需 ...

  3. Python Django 前后端数据交互 之 后端向前端发送数据

    Django 前后台的数据传递 严正声明:作者:psklf出处: http://www.cnblogs.com/psklf/archive/2016/05/30/5542612.html欢迎转载,但未 ...

  4. Django 系列博客（十六）

    Django 系列博客(十六) 前言 本篇博客介绍 Django 的 forms 组件. 基本属性介绍 创建 forms 类时,主要涉及到字段和插件,字段用于对用户请求数据的验证,插件用于自动生成 h ...

  5. Django 系列博客（十四）

    Django 系列博客(十四) 前言 本篇博客介绍在 html 中使用 ajax 与后台进行数据交互. 什么是 ajax ajax(Asynchronous Javascript And XML)翻译 ...

  6. Django 系列博客（十三）

    Django 系列博客(十三) 前言 本篇博客介绍 Django 中的常用字段和参数. ORM 字段 AutoField int 自增列,必须填入参数 primary_key=True.当 model ...

  7. Django 系列博客（十一）

    Django 系列博客(十一) 前言 本篇博客介绍使用 ORM 来进行多表的操作,当然重点在查询方面. 创建表 实例: 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日 ...

  8. Django 系列博客（十）

    Django 系列博客(十) 前言 本篇博客介绍在 Django 中如何对数据库进行增删查改,主要为对单表进行操作. ORM简介 查询数据层次图解:如果操作 mysql,ORM 是在 pymysql ...

  9. Django 系列博客（八）

    Django 系列博客(八) 前言 本篇博客介绍 Django 中的模板层,模板都是Django 使用相关函数渲染后传输给前端在显式的,为了想要渲染出我们想要的数据,需要学习模板语法,相关过滤器.标签 ...

随机推荐

  1. Air21

    handler package com.icil.edi.ws.milestoneService.handler; import java.text.SimpleDateFormat; import ...

  2. javascript instanceof,typeof的区别

    区分string 与 String的区别 为什么结果会是false呢? <script type="text/javascript"> var aColors = [& ...

  3. 「小程序JAVA实战」小程序视频处理工具ffmpeg（47）

    转自:https://idig8.com/2018/09/16/xiaochengxujavashizhanxiaochengxushipinchuligongjuffmpeg46/ 前面已经把视频成 ...

  4. 可视化库-Matplotlib-条形图(第四天)

    1.画两个条形图,bar和barh, 同时axes[0].axhline画一条横线,axes[1].axvline画一条竖线 import numpy as np import matplotlib. ...

  5. Cannot find class [org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer]

    解决方案:添加spring-webmvc好多人都不知道org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer这个类到底 ...

  6. python初步要点

    [python初步要点] #! 用于告诉操作系统去哪里找Python解释器为运行您的程序. 1.print 的输出有以下2种形式,""%()的形式类似于C的printf. 要注意逗 ...

  7. abd启动不了

    解决办法: 杀死 db.exe或者tadb.exe

  8. 3-java_string学习笔记：

    java中String的常用方法

  9. adf 日志输出

    1,选中ViewController或是Model,在属性框中,做如下配置,run/debug后可以看到日志信息中,将adf的整个执行过程很详细的打印出来了. 在每个项目的Project proper ...

  10. 本周MySQL官方verified/open的bug列表（11月15日至11月21日）

    本周MySQL verified的bug列表(11月15日至11月21日) 1. Bug #70923    Replication failure on multi-statement INSERT ...