django学习笔记012-ajax局部刷新技术

最新推荐文章于 2023-05-12 15:39:02 发布

蒋程扬

最新推荐文章于 2023-05-12 15:39:02 发布

阅读量4k

点赞数

分类专栏： Django

本文链接：https://blog.csdn.net/qq_38441692/article/details/85270034

版权

Django 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

一，什么是ajax？
ajax中文名称就是异步的JavaScript
正常情况下在网页中我们填写完表单后提交表单发起get/post请求时浏览器重新向服务器发起整个界面的请求，这就导致会刷新网页整个界面，可是有时候这是不需要的。
频繁请求整个网页会增加服务器的压力，同时也降低给用户的体验
这时候ajax就随之而生，ajax可以在不刷新整个界面的情况下单独向服务器发去get/post请求，并获得请求结果返回给浏览器。
二，使用ajax
使用ajax需要用到jQuery或js，在django中，属于静态文件，需要单独放在一个文件夹下，
新建static目录，并且讲jQuery文件放置在该目录下：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20181221134134438.png

在setting.py文件下设置静态文件的目录：

STATICFILES_DIRS=[os.path.join(BASE_DIR, 'static')]#设置静态文件的保存目录

在这里插入图片描述在HTML界面引入jQuery文件，通过jquery的`

$.ajax({
'url':     ,
'dateType':  ，
})`.success(function(){

})

进行访问，页面代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
   <script src="/static/js/jquery.min.js"></script>
    <script>
    $(function(){
    $('#btnload').click(function(){
     $.ajax({
     'url':'/ajax_handle',  //访问的url地址
     'dateType':'json'  //想要获得的返回数据类型
     }).success(function(date){  //执行成功的回调函数（含有返回的数据（date））

     })
    })
    })
</script>
</head>
<body>
<input type="button" value="发起ajax请求" id="btnload" \>
</body>
</html>

点击发起ajax请求：
在这里插入图片描述可以在后台看见访问了ajax_handle视图：

匹配url：

url(r'^ajax_handel$',views.ajax_test),

书写视图函数：
由于ajax接受的数据类型为json类型，所以视图函数中要返回一个json类型的：
引入接口：
在这里插入图片描述
书写视图函数：

在这里插入图片描述
def ajax_test(request): return JsonResponse({"msg": "ok"})

在jquery文件写成功后的处理文件：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
   <script src="/static/js/jquery.min.js"></script>
    <script>
    $(function(){
    $('#btnload').click(function(){
     $.ajax({
     'url':'/ajax_handle',  //访问的url地址
     'dateType':'json'  //想要获得的返回数据类型
     }).success(function(date){  //执行成功的回调函数（含有返回的数据（date））
      alert(date["msg"])
     })
    })
    })
</script>
</head>
<body>
<input type="button" value="发起ajax请求" id="btnload" \>
<p id="p1"></p>
</body>
</html>`

查看运行效果：
在这里插入图片描述运行成功
三，关于同步和异步
在上面的执行过程中，ajax请求默认是异步的。

   $(function(){
    $('#btnload').click(function(){
     $.ajax({
     'url':'/ajax_handle',  //访问的url地址
     'dateType':'json'  //想要获得的返回数据类型
     }).success(function(date){  //执行成功的回调函数（含有返回的数据（date））
      alert(date["msg"])
     })
    })
    })

 }).success(function(date){  //执行成功的回调函数（含有返回的数据（date））
      alert(date["msg"])

这里的success回调函数，是当服务器成功返回ajax请求的结果时执行的函数
异步是指当success的回调函数未被执行时，发起ajax请求后，直接去执行下面的代码，而不去等待success回调函数执行成功后再执行下面的代码
同步就是当success回调函数执行成功后才去执行下面的jQuery代码
设置ajax请求为同步模式：
只需在ajax请求中加上‘async':false即可：
在这里插入图片描述

蒋程扬

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
django学习笔记012-ajax局部刷新技术

一，什么是ajax？ajax中文名称就是异步的JavaScript正常情况下在网页中我们填写完表单后提交表单发起get/post请求时浏览器重新向服务器发起整个界面的请求，这就导致会刷新网页整个界面，可是有时候这是不需要的。频繁请求整个网页会增加服务器的压力，同时也降低给用户的体验这时候ajax就随之而生，ajax可以在不刷新整个界面的情况下单独向服务器发去get/post请求，并获得请求...
复制链接

扫一扫

专栏目录