Django中的ajax细节

原代码

html 复制代码
<script>
    $(function () {
        // 根据id获取展示框
        var viewer = $3Dmol.createViewer("gldiv");
        var pdbModel, sdfModel;
        var colorpdb = '700080', colorsdf = '000F00';
        // 这里两个src表示文件路径
        var sdf = '../resources/sdf/99.sdf';
        var pdb = '../resources/pdb/4iiy.pdb';

        // 加载pdb和sdf文件 相对路径
        $.when($.get(pdb), $.get(sdf)).done(function (pdbData, sdfData) {
            pdbModel = viewer.addModel(pdbData[0], "pdb");
            sdfModel = viewer.addModel(sdfData[0], "sdf");

            viewer.setStyle({model: pdbModel}, {cartoon: {color: colorpdb}}); // 六进制颜色代码,不含透明度
            viewer.setStyle({model: sdfModel}, {stick: {color: colorsdf}});
            viewer.zoomTo();
            viewer.render();
        });
</script>

代码功能

这里想用3Dmol.js进行分子的3D渲染,通过改变sdf和pdb对应的值,来渲染不同的文件

那么在后端自然而然就想到,在服务器中存好对应文件后,保存对应文件路径并通过模版中的变量写法来改变这里的src的值


问题发现

后端处理无误的情况下前端仍无法正确显示对应结果

经过我路由调试,视图函数的返回结果,网页中请求的抓包,最终判断我后端处理已经正确

抓包得到的响应结果中,这里的sdf与pdb也修改为了对应后端给出的结果

然后单独访问服务器对应url的资源,发现可以得到正常返回,所以该路径无论从服务器层面还是后端角度都是正确的,但是我的文件无法得到正常渲染

起初还有一种可能,就是3Dmol.js的库文件由于网络问题没有被我正常响应拿到结果

但是反过头看网络的抓包请求,均返回200 OK,所以也排除


原因

通过查阅相关资料,回想起ajax本身是异步的,也就是说我对pdb和sdf改变之前,可能就已经执行了下面那些进行渲染的代码

解决

那么对应的方案就是一定要让渲染的操作在对sdf与pdb赋值之后再执行

也就是再多层嵌套.$ajax{....}

更改代码

html 复制代码
<script>
    $(function () {
        var viewer = $3Dmol.createViewer("gldiv");
        var pdbModel, sdfModel;
        var colorpdb = '700080', colorsdf = '000F00';
        var sdf = "{{ MEDIA_URL }}{{ sdf }}";
        var pdb = "{{ MEDIA_URL }}{{ pdb }}";

        // 使用$.ajax()代替$.get()
        $.ajax({
            url: pdb,
            success: function (pdbData) {
                pdbModel = viewer.addModel(pdbData, "pdb");
                viewer.setStyle({model: pdbModel}, {cartoon: {color: colorpdb}});
                // 在第一个文件加载完成后加载第二个文件
                $.ajax({
                    url: sdf,
                    success: function (sdfData) {
                        sdfModel = viewer.addModel(sdfData, "sdf");
                        viewer.setStyle({model: sdfModel}, {stick: {color: colorsdf}});
                        viewer.zoomTo();
                        viewer.render();
                    }
                });
            }
        });
    });
</script>
相关推荐
计算机编程小央姐6 小时前
跟上大数据时代步伐:食物营养数据可视化分析系统技术前沿解析
大数据·hadoop·信息可视化·spark·django·课程设计·食物
诗句藏于尽头6 小时前
Django模型与数据库表映射的两种方式
数据库·python·django
IT学长编程15 小时前
计算机毕业设计 基于Hadoop豆瓣电影数据可视化分析设计与实现 Python 大数据毕业设计 Hadoop毕业设计选题【附源码+文档报告+安装调试
大数据·hadoop·python·django·毕业设计·毕业论文·豆瓣电影数据可视化分析
Python私教18 小时前
Django全栈班v1.04 Python基础语法 20250912 下午
后端·python·django
Run Freely93719 小时前
Ajax-day2(图书管理)-弹框显示和隐藏
前端·javascript·ajax
凡梦千华1 天前
Django时区感知
后端·python·django
程序设计实验室1 天前
Django过时了吗?从ASGI到AI时代的思考
django
Python私教1 天前
Django全栈班v1.04 Python基础语法 20250912 上午
后端·python·django
言之。1 天前
Django REST框架:ModelViewSet全面解析
数据库·python·django
魂尾ac1 天前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现
后端·python·django·vue