一.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. c# 数据集调试工具插件

    DataSetSpySetup,调试期查看dataset数据集的记录内容, Debug DataSet

  2. Date 当前程序日期格式 参数设置 DecimalSeparator

    日期格式.货币格式等 Date DateFormat DecimalSeparator FormatSettings FormatSettings.DateSeparator='-'; 控制面板的日期 ...

  3. 通过django创建数据库的方法

    在models 文件中实现 a. from django.db import models class UserInfo(models.Model): #id列, 自增, 主键 #用户名列, 字符串类 ...

  4. CentOS上安装 jdk

    先下载最新的jdk版本 文件名:jdk-8u5-linux-x64.rpm 将文件通过winscp上传到/usr/local目录中 rpm -ivh jdk-8u5-linux-x64.rpm 系统会 ...

  5. LevelDB SSTable文件

    [LevelDB SSTable文件] LevelDb不同层级有很多SSTable文件(以后缀.sst为特征),所有.sst文件内部布局都是一样的.上节介绍Log文件是物理分块的,SSTable也一样 ...

  6. S 导入值列表浏览器、值列表

    先导入值列表浏览器,再导入值列表 一.导出模板 上面为导出模板 二.导入值列表浏览器 下面开始导入EXCEL数据 List Of Values Parent(1).xls List Of Values ...

  7. 如何在eclipse中添加android ADT（转）

    转自: http://jingyan.baidu.com/article/b0b63dbfa9e0a74a4830701e.html 对于程序开发的学者来说,eclipse并不陌生,它为我们提供了一个 ...

  8. java反射之ClassLoader

    类加载器ClassLoader ClassLoader能在运行时, 知道任意一个类的的所有属性和方法:对于任意一个对象,都能够调用它的任意方法和属性. 一.类加载器的工作机制 1:加载Jvm把clas ...

  9. for 续6

    ---------siwuxie095             for 实际运用样例(/f 的使用不列出来):     for %%i in (*) do echo %%i 显示当前目录下 ,所有非文 ...

  10. 41-邮差送信(dfs)

    邮差送信 (15分)C时间限制:1 毫秒 |  C内存限制:3000 Kb题目内容: 有一个邮递员要在n个城市之间来回送信.但有的城市之间有大路相连而有的没有路.现在要由一个城市到另一个城市送信,中途 ...