在尝试开发Django项目的过程中,想使用ajax实现点击导航栏后局部加载页面的功能。

尝试搜到的方法,比如使用.get或.load函数,发现其都会向Django服务器发送静态资源的请求,但Django服务器无法直接返回静态资源,导致请求失败。

因此突发奇想,觉得能不能直接利用下载文件的方式,将静态资源直接从Django服务器上传输过来,并进行动态加载。

这是前端测试代码

<li class="menu">
	<a href="/load/?flag=function1">功能1</a>
</li>
...
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script>
	$(() => {
		$('.menu>a').on('click', (evt) => {
			evt.preventDefault()
			let url = $(evt.target).attr('href')
			$('.main').load(url)
		})
	})
</script>

这是urls.py代码

urlpatterns = [
    path('load/', views.load),
]

这是views.py代码

def load(request):
    nowdir = os.getcwd()
    try:
        flag = str(request.GET.get('flag'))
        path = nowdir + "/templates"
        os.chdir(path)
        filename = flag + ".html"
        f = open(file=filename, mode="rb")
        data = f.read()
        resp = HttpResponse(data, content_type='application/vnd.ms-excel')
        # 通过响应头告知浏览器下载该文件以及对应的文件名
        resp['content-disposition'] = f'attachment; filename*=utf-8\'\'{filename}'
        return resp
    except Exception:
        data = {'code': 30001, 'msg': '加载模板失败'}
        return JsonResponse(data)
    finally:
        os.chdir(nowdir)

经尝试后发现,此方法可以实现ajax方式局部加载页面。

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐