一.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. Oracle数据库备份与恢复的三种方法

    转自blueskys567原文Oracle数据库备份与恢复的三种方法, 2006-10. 有删改 Oracle数据库有三种标准的备份方法,它们分别是导出/导入(EXP/IMP).热备份和冷备份. 导出 ...

  2. TMapCoordinate

    MapPiter.Location := TMapCoordinate.Create(59.965, 30.35); MapPiter.Zoom := 10;

  3. StrConv 内码转换

    StrConv(string,conversion,LCID) string,预转换的字符串了(也可以使用byte数组). Conversion: 是一个整数,只决定转换方式,VB里定义了一些常量,如 ...

  4. 【334】Python Object-Oriented Programming

    Reference: Python中self用法详解 __init__ 方法: 私有变量. Reference: [290]Python 函数 class 里面的 function 创建与此一致,只是 ...

  5. 迷你MVVM框架 avalonjs 1.2.4发布

    这段时间一直忙于建立avalon的单元测试,与重构官网.对avalon的更新都是来自公司内部的需求,性能优化与一些BUG修复. 添加大量调试日志. 重构shimController,以提高性能. cr ...

  6. iOS 通过URL网络获取XML数据的两种方式

    转载于:http://blog.csdn.net/crayondeng/article/details/8738768 下面简单介绍如何通过url获取xml的两种方式. 第一种方式相对简单,使用NSD ...

  7. Python运维开发基础07-文件基础

    一,文件的基础操作 对文件操作的流程 [x] :打开文件,得到文件句柄并赋值给一个变量 [x] :通过句柄对文件进行操作 [x] :关闭文件 创建初始操作模板文件 [root@localhost sc ...

  8. 131. Palindrome Partitioning (Back-Track, DP)

    Given a string s, partition s such that every substring of the partition is a palindrome. Return all ...

  9. Ubuntu在命令行下将默认语言改为英语

    将Ubuntu安装成中文版,需要将默认语言改为英文. 用vi(或nano等文本编辑器)打开 /etc/default/locale 文件 将原来的配置内容修改为 LANG=”en_US.UTF-8″ ...

  10. (OK) 国内常用NTP服务器地址及IP

    https://www.douban.com/note/171309770/ ntpdate s2c.time.edu.cn      北京邮电大学 ntpdate s2m.time.edu.cn   ...