17 视图 ajax请求 同步 异步

ajax:异步的JavaScript，在不重新加载页面的情况下，对页面进行局部的刷新

页面发起一个ajax请求：

$ajax({

　　'url':请求的地址,

　　'type': 请求方式（get或post），不写默认就是get

　　'dataType':预期返回的数据格式(json),

　　'data':参数

　　'async': flase或true, 默认为true（异步），设置为false为同步

}).done(function(data){

　　//执行成功后的回调函数，data是返回的数据。如果是同步，那么在回调函数执行之前，回调函数后面的代码暂不执行，异步则不管，即使回调函数没执行，它代码也会继续执行。

})

 注意：这里的done，在老版本的jquery用的是success

Django进行处理：

return JsonResponse( {'res':1} ) //返回一个JsonResponse对象，from django.http import sonResponse

 

ajax需要一个jquery文件，在Django中，使用静态文件（js css image等），先在Django项目下见一个static文件夹（跟模版同路径），然后在settings.py中，在STATIC_URL = '/static/'下方添加：STATICFILES_DIRS = [os.path.join(BASE_DIR,static)]  //设置静态文件等保存目录

然后在static文件夹下面分别建立js、css、images等文件夹分别存放相关文件。

要用ajax，把jquery.js放到js目录中

 

一个页面，点击按钮发起一个ajax请求，请求/ajax_handle：

 

<!DOCTYPE html>
<html>
<head>
    <title>ajax test page</title>
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <script type="text/javascript">
       $(function(){
        //绑定点击事件
        $('#btn_ajax').click(function(){
            $.ajax({
                url:'/ajax_handle',
                dataType:'json',
            }).done(function(data){
                // alert(data.res)
                if(data.res==1){
                    $('#message').show().html('提示信息')
                }
            })
        })
       })
    </script>
    <style type="text/css">
        #message{
            display: none;
            color: red;
        }
    </style>
</head>
<body>
    <!-- 点击按钮发起一个ajax请求 -->
    <input type="button" id='btn_ajax' value="ajax request">
    <div id='message'></div>
</body>
</html>

 

 

urls.py

urlpatterns = [
    path('index', views.index),
    path('create', views.create),
    re_path(r'^delete/(\w+)', views.delete),
    path('areas',views.areas),
    path('login',views.login),
    path('check',views.check),
    path('ajax',views.ajax),
    re_path('^ajax_handle$',views.ajax_handle),

]

 

views.py

def ajax(request):
    #显示ajax页面
    return render(request,'ajax.html')

def ajax_handle(request):
    #ajax请求处理
    # 例如返回json数据：{'res':1}
    return JsonResponse({'res':1})

 

posted @ 2019-08-12 22:06  greenfan  阅读(192)  评论(0)    收藏  举报