Django的日常-AJAX

目录

  • Django的日常-AJAX

    • AJAX简介
    • AJAX与JQ的一个实例
    • AJAX与contentType
    • AJAX传json格式
    • AJAX传文件

Django的日常-AJAX

AJAX简介

首先AJAX是一种无需重新加载整个网页的前提下,能够更新部分网页的技术,他并不是一种新的编程语言,而是一种使用现有标准的新方法,是基于原生JavaScript开发的,他可以用于创建快速动态网页.

AJAX最大的特点就是局部刷新以及异步提交,局部刷新,顾名思义就是可以在不刷新整个页面的情况下局部刷新,而异步提交就是提交任务之后不需要原地等待任务的返回值,可以继续向下运行,之后通过回调函数来接收到之前提交任务的返回值,效率非常高.

本文并不是从JS来对AJAX做说明,而是从一个相对简单的角度,结合AJAX和jQuery的用法,可以大大简化AJAX本身的代码量,并实现更多的功能,下面我们通过一个实例来说明AJAX和jQuery结合的具体用法.

AJAX与JQ的一个实例

题目如下:写一个前端页面,页面上有两个输入框,在第一个输入框里面输入一个计算式,在第二个输入框里面显示其结果,注意,页面不可以刷新,即不能通过直接赋值刷新页面的方式来做,现在我们就回忆一下怎样从零开始创建一个Django项目,然后一步一步完成这个需求

# 首先,创建一个Django项目,注意,目录名不要带中文,这里我们定义项目名为task,第一个应用名为app01
# 然后,在task/urls.py里面写入
# task/urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^', views.home),
]

写好路由之后,我们去views.py里面写方法

# app01/views.py
def home(request):
    if request.is_ajax():# 这里判断请求类型是否是AJAX的类型
        if request.method == 'POST':# 判断请求method是否是POST
            t1 = request.POST.get('t1')# 两个判断都通过的话,取请求的t1的value值,t1是在前端home.html里面起的别名,第一个输入框的id为t1
            t1 = eval(t1)   # 去引号,因为从前端传过来的是字符串,不能做运算,去引号之后就会变成一个计算式,把计算式直接传给前端就可以计算
            return HttpResponse(t1)
    return render(request, 'home.html')

然后,我们去templates文件夹下新建一个html文件,命名为home.html,当然,我们要先在头部<head>里导入jQuery

# templates/home.html
<head>
<script src="https://code.jquery.com/jquery-3.4.1.js"
</script>
</head>
<body>
计算式
<br>
<input type="text" id="t1">//这里定义一个输入框,用来输入计算式
<button id="b1">计算</button>//按钮,最简单的就是最实用的,我们可以给一个空白的按钮绑定很多我们需要的功能,这里id设为b1,方便下面AJAX调用

<br>
结果
<br>
<input type="text" id="t2">//定义第二个输入框,用来显示得到的结果

<script>//下面就是AJAX和jQuery的结合使用
    $('#b1').on('click', function () {//给按钮绑定一个点击事件,b1是上面定义的button的id
        $.ajax({    //下面就是AJAX需要的参数

            // 1.向后端地址发数据,不写默认就是朝当前地址提交
            url: '',

            // 2.发送的请求,常用的就是post或get
            type: 'post',

            // 3.发送数据的内容
            data: {'t1':$('#t1').val()},

            // 4.异步提交的任务 需要通过回调函数来处理,即success就是回调函数,用来接收从后端返回的数据,并做处理
            success: function (data) { //这里data就是后端发给前端的异步提交的返回结果
                {#alert(data);#}
                $('#t2').val(data) //这里给t2输入框赋值,t2是上面给第二个输入框定义的id
            }
        })
    })
</script>
</body>

上面三个文件都写完之后,执行整个项目,就可以得到我们想要的页面以及功能啦.

AJAX与contentType

contentType,英译为内容类型,消息类型,这里也是AJAX的参数之一,其主要作用是前端告诉后端其发送的数据的格式类型.

我们知道form表单提交的数据默认格式是urlencoded,这种类型的特点是什么呢?如下:

username=hello&password=123&age=12就是这种,以键值对的形式,并以&连接起来的方式,就是urlencoded格式的数据,并且django后端会对这种数据格式的数据进行解析,将结果打包放在request.POST里面,我们只需要从request.POST里面就可以得到我们想要的所有信息.

当然我们知道form表单还有另外一种编码格式,就是formdata,定义方式为:

<form action="" enctype="multipart/form-data"></form>,该格式相对于urlencoded不同的地方在于,他不仅可以传平时的数据,还可以用来传文件,但有区别的是,django后端对于formdata的格式类型解析之后,文件类型的数据不会放在request.POST里面,而是放在request.FILES里面,所以我们取数据的时候要注意.

AJAX的默认数据类型其实就是urlencoded格式.

AJAX传json格式

json格式我们都知道,是一种跨平台特别好的数据格式,因为几乎所有语言都会写对接json格式数据的方法,所以跨平台的时候基本都会选择json格式来传输数据,而且,django后端针对json格式的数据不会自动解析,会原封不动的放在request.body里面,这样我们可以原模原样手动取到前端发的数据,不必害怕数据丢失和失真,那么我们使用AJAX怎么把数据格式变成json格式并传输的呢?方法如下:

# home.html
<script>
    $('#b1').on('click',function () {
        $.ajax({
            url:'',
            type:'post',
            // 1. 告诉后端你当前的数据格式 到底是什么类型,因为我们要转换成json数据,所以就告诉后端我们发的就是json格式数据
            contentType:'application/json',
            // 2. 这里才是真正的把要传到后端的数据转成json格式,关键字为JSON.stringify({})
            data:JSON.stringify({'username':'jason','password':'123'}),

            success:function (data) {
                alert(data)
            }
        })
    })
</script>

# 后端在处理json数据的时候,常用以下格式
# views.py
import json
def home(request):
     if request.method == 'POST':
        json_bytes = request.body   # 这里从request.body里面拿出json格式的数据
        json_str = str(json_bytes,encoding='utf-8')# 将json格式的数据转换成str字符串类型
        json_dict = json.loads(json_str)    # 对字符串的数据反序列化,得到真正的json的大字典
        print(json_dict,type(json_dict))
    return render(request,'index.html')

AJAX传文件

我们知道form表单传输文件的话需要用multipart/form-data格式,那么AJAX如果需要传输文件,也是非常相似的东西,需要用到内置对象Formdata,这个内置对象非常强大,可以传普通的键值,也可以传文件,下面我们就以Formdata为例来看看AJAX的代码怎么写

# home.html

<input type="file" name="myfile" id="t3">
<script>
$('#b1').on('click',function(){
    //1. 生成一个FormData对象,方便后面操作
    var myFormData = new FormData();
    //2. 向生成的对象里面添加普通值
    myFormData.append($("#t1").val());
    //3. 向生成的对象里面添加文件,其实这里是三步,合并成了一步
        //(1).要先通过jQuery查找到该文件的标签
        //(2).然后把jQuery对象转换成js对象
        //(3).利用原生js对象的方法,直接取到文件的内容
    myFormData.append("myfile",$("#t3")[0].files[0]);
    $.ajax({
            url:'',
            type:'post',
            data:myFormData,  // 直接把前面定义的myFormData对象给data即可
            // ajax传文件的时候,一定要指定两个关键性的参数
            contentType:false,  // 不用任何编码,因为formdata对象自带编码
            processData:false,  // 告诉浏览器不要处理我的数据,直接发给后端就行
            success:function (data) {
                alert(data)
            }
        })

})
</script>

原文地址：https://www.cnblogs.com/Xu-PR/p/11755174.html

时间： 2024-08-02 21:30:35

Django的日常-AJAX的相关文章

Django中的Ajax详解

AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步Javascript和XML".即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML). 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求:异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求.AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新:(这一特点给用户的感受是在不知不觉中完成请

django 使用jquery ajax post数据问题

django 开启了CSRF功能导致jquery ajax post数据报错 解决方法在post数据里引入csrfmiddlewaretoken: '{{ csrf_token }}'},同时需要在form表单中设置{% csrf_token %} <script src="/static/jquery/dist/jquery.min.js"></script> <script> $(function(){ $("#postset"

django中给ajax提交加上csrf

在html中的script标签下插入下面代码 在html文档加载时候运行下面代码,并且使用$.ajaxSetup设置ajax每次调用时候传入的数据,$.ajaxSetup进行默认的设置,只需要设置一次,每次ajax调用都会使用. 注意,以下代码使用了jquery,jquery.cookies.js 库.在head部分引用这些库,才能使得正常运行.另外需注意在某些特别情况下django并没有将csrftoken设置到cookie里面.那么这代码就失去了作用. $(document).ready(

django 用jquery ajax提交form 实现刷新部分页面

首先要引入jquery文件,可以引入在线的,也可以下载离线的 添加进自己staticfiles 这里演示的是添加离线的 <script src={% static 'jquery/jquery.min.js' %}></script> 注意这句是要添加到自己写的jquery脚本前边 然后写一个简单的表单 <form method="post" id="formadd"> {% csrf_token %} <label for

Django基础之Ajax

知识预览 Ajax前戏:json Ajax简介 Jquery实现的ajax JS实现的ajax Ajax前戏:json 什么是json? 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据.简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言. 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输

Django 如何让ajax的POST方法带上CSRF令牌

大家知道,在大前端领域,有一种叫做ajax的东东,即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),它被用来在不刷新页面的情况下,提交和请求数据.如果Django服务器接收的是一个通过ajax发送过来的POST请求的话,那么将很麻烦.何也?因为在ajax中,没有办法像form表单中那样携带{% csrf_token %}令牌.那怎么办呢?好办!在你的前端模版的JavaScript代码处,添加下面的代码: // 使用jQuer

Django之原生Ajax操作

Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件). 先通过代码来看看Ajax吧! views.py from django.shortcuts import render,redirect,HttpResponse from django import forms from django.forms import fields from app_01 import mod

django中使用Ajax

内容: 1.Ajax原理与基本使用 2.Ajax发送get请求 3.Ajax发送post请求 4.Ajax上传文件 5.Ajax设置csrf_token 6.django序列化 参考:https://www.cnblogs.com/liwenzhou/p/8718861.html 1.Ajax原理与基本使用 关于Ajax的原理及其基本使用,直接看这篇博文即可:https://www.cnblogs.com/wyb666/p/9387488.html 2.Ajax发送get请求 views.py:

Django基础之Ajax简介

Ajax(Asynchronous JavaScript And XML)翻译成中文就是"异步的JavaScript和XML".即使用JavaScript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML). Ajax不是新的编程语言,而是一种使用现有标准的新方法. Ajax最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容.(这一特点给用户的感受是在不知不觉中完成请求和响应过程) Ajax不需要任何浏览器插件,但需要用户允许Jav