示例一

文件结构

假设你已经创建好了一个Django项目和一个App,部分结构如下:

mysite
myapp
|___views.py
|___models.py
|___forms.py
|___urls.py
templates
|___ajax_test.html

示例代码

  • ajaxTest.html
<p id="data"> something interesting </p>
<button ajax-url='{% url test_ajax %}'></button>
<span id="ajax-content"></span> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script> $(document).ready(function () {
$("button").click(function () {
var url = $(this).attr('ajax-url');
var ajax_input_data = $('data').html(); $.ajax({
url: url,
data: {
'ajax_input_data': ajax_input_data
},
success: function(return_data){
$('#ajax-content').html(return_data);
}
})
});
});
</script>
  • myapp/urls.py
urlpatterns = [
'ajax/test_ajax', views.test_ajax, name='test_ajax',
]
  • myapp/views.py
def test_ajax(request):
data = request.GET.get('ajax_input_data');
# 处理data
output_data = ... # 1.直接返回output_data
# return output_data # 2.也可以返回html元素
return render(request, '<b> {{ output_data }}</b>', {"output_data":output_data})

原理

要实现Django和ajax进行数据通信的大致原理如下:

当我们点击这个button后,触发js代码,然后ajax会将必要信息包装好,即

  • url:这个url是在urls.py文件中已经注册好的,而且它与views.py中的一个函数进行了绑定
  • data:其实就是个字典,这个data是作为输入数据以GET的形式传给后台
  • success:这个表示当数据建立通信且后台代码处理完后需要执行什么样的操作。注意这里的function中的data只是形参,所以不同于上面的data,它其实是后台返回的数据。在这个示例中,当后台处理完毕后,会将返回的数据填充到<span>元素中去。

整个数据处理流程可以参看下图:

其他例子(转载)

以下内容转载自Django基础之ajax

django+ajax基础使用

模版页面

index.html

<form>
<input type="text" id="tn">
<button type="button" id="formquery">提交</button>
</form>
<span id='result'></span>
<script>
$(document).ready(function(){
$("#formquery").click(function(){
var toolsname = $("#tn").val();
$.get("/query/",{'toolsname':toolsname}, function(ret){
$('#result').html(ret) #在页面中显示。可以用用$.ajax方法代替$.get
})
});
});
</script>

以上代码的参数说明:

  • \(.get 表示ajax使用GET方式发送请求,也可以改成\).ajax,或者$.post表示post请求
  • id=”tn” 对应着js中获取的参数名称$(“#tn”)
  • id=”formquery” 对应着按钮事件所对应的js的函数名称
  • id=’result’ 对应着结果返回到哪个位置$(‘#result’)

注意:这里需要注意的是button的type不能写submit,因为写了submit就直接使用get请求/query/了,而没有执行ajax请求。

view.py

from django.http import HttpResponse
def query(request):
r=request.GET.get("toolsname")
name_dict="123"
return HttpResponse(json.dumps(name_dict), content_type='application/json')
或者可以使用JsonResponse:
from django.http import JsonResponse
def query(request):
r=request.GET.get("toolsname")
name_dict="123"
return JsonResponse(name_dict)

说明:在视图层,即view.py中,跟正常的接受http请求的方式一样。views.py 中可以用 request.is_ajax() 方法判断是否是 ajax 请求。

关于ajax的一些高级用法

等我实验完再记录…….

ajax获取返回值后执行js

<textarea name="content" id="content" class="form-control" rows="20"></textarea>
<script>
$(document).ready(function(){
$("#sub_encode").click(function(){
var content = $("#content").val(); $.get("/add/",{'content':content}, function(ret){
document.getElementById('content').value = ret
})
});
</script>

说明:获取返回值后,将返回值填充到textarea文本框内。

ajax+post CSRF认证

在ajax代码前,加入以下js。

<script>
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
</script>

ajax+按钮加载过渡

有时候网页中的某些功能需要比较长的时间等待,这时候使用ajax是比较好的,因为它不需要整个网页刷新,用户体验比较好。而按钮加载过渡的意思,就是当你点击按钮后,按钮字体内容变为“加载中”,等到ajax返回内容后再恢复,这样会使体验更好。

<button class="btn btn-primary btn-sm" type="button" id='sub_encode' data-loading-text="Loading加载中..." autocomplete="off" onclick="loag()">运行</button>
<!-- 将按钮过渡的代码整合到ajax中 -->
<script>
$(document).ready(function(){
$("#sub_encode").click(function(){
var content = $("#content").val();
var btn = $("#sub_encode"); //获取按钮对象
btn.button('loading');//按钮显示为过渡状态 $.post("{% url 'run_ajax' %}",{'content':content,"type":"encode"}, function(ret){
document.getElementById('content').value = ret
btn.button('reset');//按钮恢复正常
})
});
</script>
<!-- 底部加载js -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

ajax+列表字典返回

ajax返回的内容是json格式的列表或者字典时,该如何渲染到页面?如下,若后端返回的数据是json:[{“a”:”1”,”b”:”2”},{“c”:3,”d”:”4”}]

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="tn" placeholder="请输入搜索关键词">
<button type="button" id="formquery" data-loading-text="努力加载中..." autocomplete="off" onclick="loag()">搜索一下</button>
<!-- 搜索结果列表 -->
<p id="list_result" style="word-wrap:break-word;word-break:break-all;"></p> <!-- ajax请求 -->
<script>
$(document).ready(function(){
$('#formquery').click(function(){
var q = $("#tn").val();
var btn = $("#formquery"); //获取按钮对象
btn.button('loading');//按钮显示为过渡状态
$.getJSON('/search/',{"q":q},function(ret){
document.getElementById('list_result').innerText = ""; // 重置<p>的内容
$.each(ret, function(i,item){ // 遍历列表
$.each(item, function(key,value){ // 遍历字典
$('#list_result').append(key+":"+value)
});
});
btn.button('reset');
})
})
});
</script>
<!-- 底部加载js -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

ajax配合页面自动刷新

<input type="hidden" id="formquery" onclick="loag()"> # 按钮(隐藏)
<div id="task_schedule_result"></div> # 显示内容的地方
# 点击按钮事情时,发送ajax请求js
<script>
$(document).ready(function(){
$('#formquery').click(function(){
$.getJSON("{% url 'task_schedule' %}",function(ret){
document.getElementById('task_schedule_result').innerHTML = ret;
})
})
});
</script>
# 自动点击按钮js
<script type="text/javascript">
function myrefresh(){
document.getElementById('formquery').click();
}
setInterval("myrefresh()","10000"); # 每个10秒执行一次点击按钮
</script>

说明:以上html代码是每隔10s利用ajax请求,获取后端数据代码。

MARSGGBO♥原创







2019-9-3

Django如何与ajax通信的更多相关文章

  1. Django中的Ajax

    Ajax 很多时候,我们在网页上请求操作时,不需要刷新页面.实现这种功能的技术就要Ajax!(本人定义,不可迷信) jQuery中的ajax就可以实现不刷新页面就能向后台请求或提交数据的功能,我们仍然 ...

  2. 获取Ajax通信对象方法

    function getXHR() { // 该方法用于获取Ajax通信对象 var xhr = null; if (window.XMLHttpRequest != null && ...

  3. vue和jQuery嵌套实现异步ajax通信

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. django中的ajax组件

    目录 django中的ajax 向服务器发送请求的途径 Ajax的特点 基于jquery实现的ajax请求 利用ajax实现计算器 利用ajax实现登陆认证 利用form表单进行文件上传 利用ajax ...

  5. Django框架 之 Ajax

    Django框架 之 Ajax 浏览目录 AJAX准备知识 AJAX与XML的比较 AJAX简介 jQuery实现的ajax AJAX参数 AJAX请求如何设置csrf_token 序列化 一.AJA ...

  6. Django中的Ajax详解

    AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当 ...

  7. Django的日常-AJAX

    目录 Django的日常-AJAX AJAX简介 AJAX与JQ的一个实例 AJAX与contentType AJAX传json格式 AJAX传文件 Django的日常-AJAX AJAX简介 首先A ...

  8. Django框架09 /ajax、crsf、settings导入

    Django框架09 /ajax.crsf.settings导入 目录 Django框架09 /ajax.crsf.settings导入 1. ajax概述 2. ajax应用 3. ajax上传文件 ...

  9. 采用jquery同django实现ajax通信

    在网页访问中通过HTTP协议中的get/post文件发送数据或请求.在浏览器中输入url后,浏览器就会帮助我们完成请求的发送和返回,并刷新更新界面.但是,如果我们不想更新界面,仅仅是发送一个get/p ...

随机推荐

  1. centos虚拟机扩展磁盘空间(经历无数坑,血一样总结,史上最全)

    第一步 在vmware中将虚拟机关机后,鼠标右键设置,直接点击扩展加自己想要扩展的数量就可以了,这个比较简单不多说. 2 第二步 设置后进系统查看空间大小变化,实际并没有什么变化,我用的命令是df - ...

  2. 依赖注入之unity(winform方式)

    依赖注入之unity(winform方式) 要讲unity就必须先了解DI和IOC及DIP,如下链接提供DI和IOC的基础:https://www.cnblogs.com/zlp520/p/12015 ...

  3. c# MongoDB分页辅助类,支持多条件查询

    创建一个获取MongoDB数据库实例的类 public class Db { private static IMongoDatabase db = null; private static reado ...

  4. 【C/C++开发】STL内嵌数据类型: value_type

    使用stl库的时候一直对value_type这个东西理解的不是很好,可以说就是不理解.今天看了<STL源码剖析>才恍然大悟.这里稍作记录. 每个STL中的类都有value_type这种东西 ...

  5. 基于springboot的flowable工作流实例实现

    基于springboot的flowable工作流实例实现 flowableUI 创建实例教程 https://www.cnblogs.com/nanstar/p/11959389.html Flowa ...

  6. C#实现ActiveMQ消息队列

    本文使用C#实现ActiveMQ消息队列功能. 一.首先需要导入两个包,分别是:Apache.NMS 和 Apache.NMS.ActiveMQ 二.创建Winform程序实现生产者功能. 三.Pro ...

  7. 认识一下microbit扩展板robotbit

    在我们买到的套件中,另一块叫robotbit扩展板,所谓扩展板,是把控制板上的针脚引出来,方便我们扩展驱动连接电机.舵机.及各种传感器以展功能. 介绍如下 :下面 反面: 官方文档:http://le ...

  8. Ansible14:Playbook条件语句

    目录 简介 when关键字 1. when基本使用 2. 比较运算符 3. 逻辑运算符 条件判断与tests 判断变量 判断执行结果 判断路径 判断字符串 判断整除 其他tests 条件判断与bloc ...

  9. 词向量实践(gensim)

    词向量训练步骤: 分词并去停用词 词频过滤 训练 项目完整地址:https://github.com/cyandn/practice/tree/master/Word2Vec gensim中Word2 ...

  10. TP5 按照汉字的拼音排序

    业务需求:接口返回一个列表,但是这个列表要求按一定的条件排序,条件如下: 1,某字段(field1)为null的排前面 2,某字段(field2)为null的排前面 3,姓名(field3)按照汉字的 ...