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>
相关推荐
强化生物科研小助手21 小时前
CAS:47623-98-3,DiSBAC2(3)一种慢反应的膜电位敏感探针
django·html·pygame
橘猫云计算机设计1 天前
基于springboot的考研成绩查询系统(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·python·考研·django·毕业设计
程序员一诺1 天前
【Django开发】前后端分离django美多商城项目第15篇:商品搜索,1. Haystack介绍和安装配置【附代码文档】
后端·python·django·框架
jakeswang1 天前
查询条件与查询数据的ajax拼装
前端·ajax
小狗很可爱2 天前
视图函数的应用
django
麦麦大数据2 天前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
兔子的洋葱圈2 天前
【django】1-2 django项目的请求处理流程(详细)
后端·python·django
爱摄影的程序猿2 天前
如何基于 Django-Vue-Admin 快速二次开发?高效后台管理系统实战指南(附完整代码)
vue.js·python·django
橘猫云计算机设计3 天前
基于django优秀少儿图书推荐网(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·python·小程序·django·毕业设计
靠近彗星3 天前
基于 Vue + Django + MySQL 实现个人博客/CMS系统
前端·vue.js·python·mysql·django