一，什么是ajax？

ajax中文名称就是异步的JavaScript

正常情况下在网页中我们填写完表单后提交表单发起get/post请求时浏览器重新向服务器发起整个界面的请求，这就导致会刷新网页整个界面，可是有时候这是不需要的。

频繁请求整个网页会增加服务器的压力，同时也降低给用户的体验

这时候ajax就随之而生，ajax可以在不刷新整个界面的情况下单独向服务器发去get/post请求，并获得请求结果返回给浏览器。

二，使用ajax

使用ajax需要用到jQuery或js，在django中，属于静态文件，需要单独放在一个文件夹下，

新建static目录，并且讲jQuery文件放置在该目录下：

![在这里插入图片描述]

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

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

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

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

在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请求：

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

可以在后台看见访问了ajax_handle视图：

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


匹配url：

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

书写视图函数：

由于ajax接受的数据类型为json类型，所以视图函数中要返回一个json类型的：

引入接口：

django学习笔记012-ajax局部刷新技术_回调函数_05


书写视图函数：

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


​​def ajax_test(request): return JsonResponse({"msg": "ok"})​​在jquery文件写成功后的处理文件：

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

<!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>`

查看运行效果：

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

运行成功

三，关于同步和异步

在上面的执行过程中，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​​即可：

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