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>
相关推荐
unicrom_深圳市由你创科技16 小时前
使用Django框架构建Python Web应用
前端·python·django
ku_code_ku16 小时前
Django由于数据库版本原因导致数据库迁移失败解决办法
后端·python·django
LuckyLay18 小时前
1.2.2 高级特性详解——AI教你学Django
python·django·sqlite
【本人】18 小时前
Django基础(三)———模板
后端·python·django
cg501720 小时前
AJAX 技术
前端·javascript·ajax
白仑色20 小时前
AJAX 入门到精通
前端·javascript·ajax·okhttp·web开发·前端开发
言之。20 小时前
Django中get()与filter()对比
数据库·django·sqlite
小王子102420 小时前
Django 实战:I18N 国际化与本地化配置、翻译与切换一步到位
django·国际化·i18n·web开发
Mr数据杨21 小时前
【Dv3Admin】菜单管理集成阿里巴巴自定义矢量图标库
python·django