一.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. QT error LNK2019: 无法解析的外部符号

    一个见到那的错误,困扰了好几天了,今天才解决,记录下. 使用QT Creator建立项目,添加一个QT设计界面widget,命名为TestWidget.有ui,头文件(.h),源码文件(.cpp).在 ...

  2. mybatis 2 -常用数据操作

    1.写入数据并获取自增ID XML配置: <!-- 写入数据获取自增ID --> <insert id="insertLog" parameterType=&qu ...

  3. 什么是“堆”,"栈","堆栈","队列",它们的区别？

    堆:什么是堆?又该怎么理解呢? ①堆通常是一个可以被看做一棵树的数组对象.堆总是满足下列性质: ·堆中某个节点的值总是不大于或不小于其父节点的值: ·堆总是一棵完全二叉树. 将根节点最大的堆叫做最大堆 ...

  4. delphi 实体类 JSON 数组

    delphi 实体类 与JSON转换,序列化 TJson REST.JSON.pas   TJson.JsonToObjectTJson.ObjectToJsonString JsonEncode O ...

  5. sql中纵表变横表

    纵表格式如图所示: 查询sql语句如下: ),content)content,Date from SummerChina ' 变成横表如图所示: 纵表变横表sql语句如下: select Time, ...

  6. [译]2D空间中使用四叉树Quadtree进行碰撞检测优化

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Unity2017.2.0f3 原文出处 : Quick Tip: Use Quadtrees to Detect Lik ...

  7. 取消Eclipse的Error Reporting

    选择Preferences->General->Error Reporting,Send Mode选择Never send reports

  8. Redis高可用及分片集群

    一.主从复制 使用异步复制 一个服务器可以有多个从服务器 从服务器也可以有自己的从服务器 复制功能不会阻塞主服务器 可以通过服务功能来上主服务器免于持久化操作,由从服务器去执行持久化操作即可. 以下是 ...

  9. Bind搭建DNS服务

    DNS域名解析服务(Domain Name System)是用于解析域名与IP地址对应关系的服务,功能上可以实现正向解析与反向解析: 正向解析:根据主机名(域名)查找对应的IP地址. 反向解析:根据I ...

  10. 第四章 Windows的图形设备接口及Windows绘图 P83 4-6

    实验(实习)名称  图形程序设计及其应用  实验(实习)日期 一.实验目的 1．熟悉图形设备接口的概念及其应用. 二.实验内容及步骤  实验任务 1.熟悉基于图形应用的程序设计: 2.掌握刷新技术及其 ...