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

{% 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>

实现结果:

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

网络相关系列之三：通过GET和POST方法发送数据
写在最前面:年少的安逸舒适在随着年龄的到来和现实生活的压迫总有一天会全数归还(事实上就是<无间道>中那句:"出来混,迟早要还的!") so fighting. 一.GE ...
Django：前后端分离后联调给前端传数据
实现前后端分离后,有了下面几点改变: 1.服务器一分为二,前后端分别部署,静态资源放在前端服务器,业务代码放在后的服务器 2.前端服务器需要接收Http请求(一般使用node.js) 3.前端服务器需 ...
Python Django 前后端数据交互之后端向前端发送数据
Django 前后台的数据传递严正声明:作者:psklf出处: http://www.cnblogs.com/psklf/archive/2016/05/30/5542612.html欢迎转载,但未 ...
Django 系列博客（十六）
Django 系列博客(十六) 前言本篇博客介绍 Django 的 forms 组件. 基本属性介绍创建 forms 类时,主要涉及到字段和插件,字段用于对用户请求数据的验证,插件用于自动生成 h ...
Django 系列博客（十四）
Django 系列博客(十四) 前言本篇博客介绍在 html 中使用 ajax 与后台进行数据交互. 什么是 ajax ajax(Asynchronous Javascript And XML)翻译 ...
Django 系列博客（十三）
Django 系列博客(十三) 前言本篇博客介绍 Django 中的常用字段和参数. ORM 字段 AutoField int 自增列,必须填入参数 primary_key=True.当 model ...
Django 系列博客（十一）
Django 系列博客(十一) 前言本篇博客介绍使用 ORM 来进行多表的操作,当然重点在查询方面. 创建表实例: 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日 ...
Django 系列博客（十）
Django 系列博客(十) 前言本篇博客介绍在 Django 中如何对数据库进行增删查改,主要为对单表进行操作. ORM简介查询数据层次图解:如果操作 mysql,ORM 是在 pymysql ...
Django 系列博客（八）
Django 系列博客(八) 前言本篇博客介绍 Django 中的模板层,模板都是Django 使用相关函数渲染后传输给前端在显式的,为了想要渲染出我们想要的数据,需要学习模板语法,相关过滤器.标签 ...

随机推荐

JDK8时间格式转换
来源:https://blog.csdn.net/zhangzijiejiayou/article/details/76597329 LocalDateTime 本地日期时间 LocalDateTim ...
XE7 update1
[jOOQ中文] 七个步骤快速入门
https://segmentfault.com/a/1190000010415384 关于jOOQ jOOQ: The easiest way to write SQL in Java jOOQ是一 ...
np的归纳总结
1. np.sqrt(input) # 求数的开方 import numpy as np print(np.sqrt(2)) 2. np.square(3) # 求数的平方 import n ...
在浏览器输入URL后发生了什么？
摘录部分一:https://www.cnblogs.com/kongxy/p/4615226.html 从输入URL到浏览器显示页面发生了什么当在浏览器地址栏输入网址,如:www.baidu.com ...
Java调用SQL Server的存储过程详解
转载自Microsoft的官方文档 http://msdn2.microsoft.com/zh-cn/library/ms378995.aspx收录于 www.enjoyjava.net/f25 本文 ...
torque
torque - 必应词典美[tɔrk]英[tɔː(r)k] n.(使机器等旋转的)转矩网络扭矩:扭力:力矩变形过去分词:torqued:现在分词:torquing:第三人称单数:torques ...
最小子串覆盖 · Minimum Window Substring
［抄题］: 给定一个字符串source和一个目标字符串target,在字符串source中找到包括所有目标字符串字母的子串. 在答案的子串中的字母在目标字符串中是否需要具有相同的顺序? ——不需要. ...
2-ubuntu下访问window的磁盘
双系统Ubuntu无法进入Windows磁盘的解决方法有些用户在电脑上安装了Ubuntu和Win10的双系统,正常情况下Ubuntu是可以正常访问Windows磁盘的.但是有些用户就是无法再Ubun ...
spring mvc 多库连接
最近弄了个spring mvc + hibernate4为框架的项目,其中需用到其他两个库的数据.具体如下: 1.将两库的application文件配置好,需注意的地方是两个事务控制是不一样的. 和 ...

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

一.Ajax了解

二.Ajax使用

三.使用ajax传送数据

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

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

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

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

随机推荐

热门专题