booktest12-ajax測試

1.在django項目test1中新建static文件,並在下面新建js,css,images文件夾,並將jquery拷貝到js目錄下

在項目的settings.py最下面增加配置

STATICFILES_DIRS=[os.path.join(BASE_DIR,'static')]

2.增加視圖函數

def test_ajax(request):
    return render(request, 'booktest/test_ajax.html')


def ajax_handle(request):
    return JsonResponse({'res':1})

3.添加視圖模板test_ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <script src="/static/js/jquery-1.7.1.min.js"></script>
    <script>
        $(function(){
            $('#btnAjax').click(function(){
                $.ajax({
                    'url':'/ajax_handle',
                    'dataType':'json'
                }).success(function(data){
                    if (data.res==1){
                        $('#message').show().html('提示信息')
                    }
                })
            })
        })
    </script>
    <style>
        #message{
            display:none;
            color:red;
        }
    </style>
</head>
<body>
<input type="button" id="btnAjax" value="ajax請求">
<div id="message"></div>
</body>
</html>

4.增加路由

    url(r'^test_ajax$', views.test_ajax),
    url(r'^ajax_handle$', views.ajax_handle),

5.測試

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章