Question

我正在构建一个带有jinja模板的python / flask应用程序，它将包含一些html / javascript应用程序。这个特殊的使用jQuery在同一个浏览器窗口中显示不同的html / js代码。我遇到的问题是show（）函数似乎没有看到python路由，我在那里渲染我希望它访问的代码。

python路线：

import os, datetime
from flask import Flask, current_app, Blueprint, render_template, abort, request, flash, redirect, url_for, jsonify
from flask.ext.login import (current_user, login_required, login_user, logout_user, confirm_login, fresh_login_required)
from jinja2 import TemplateNotFound

import models
from libs.User import User
import random, string

leadership_app = Blueprint('leadership_app', __name__, template_folder='templates')

@leadership_app.route("/", methods=["GET", "POST"])
@login_required
def index():

    return render_template('index.html')

@leadership_app.route("/leadership/washington/", methods=["GET", "POST"])
@login_required
def washington():

    return render_template('/leadership/Globe.html')

@leadership_app.route("/leadership/location/", methods=["GET", "POST"])
@login_required
def location():

    return render_template('/leadership/location.html')

Globe.html（包含在jinja中）：

if (locationClick == 0){
complete = ++complete
locationClick = ++locationClick
checkComplete(complete/4)
}
console.log(complete/4)
 $('#location').attr('src', '/leadership/location/');
 $("#location").show();
})

location.html位于模板＆gt;领导

编辑：

感谢@Leandro Poblet我现在正在使用$ .get（）函数，看起来我可以看到路线，但我似乎无法加载location.html。我没有收到任何错误，但使用chrome中的开发人员工具我可以看到GET方法已经卡在＆＃34;待定＆＃34;我尝试删除@login_required，并确保我尝试$ .show（）的所有html文件都有加载的网址，所以我知道那里没有空白。

此时我认为可能是我尝试加载的某些.mp4文件正在减慢所有内容。它们不是大文件（都在100MB以下），所以我是否应该在python端处理视频以使它们正确加载？

这里是location.html的内容：

<script src="/static/washington/js/jquery.min.js"></script>
<script src="/static/washington/js/d3.v3.min.js"></script>
</head>
<body>


<script>
var htmlContainer = d3.select("body")                                   

htmlContainer.append("img")
.attr('id','iimage1')
.attr('class','zoom')
   .attr("src","/static/washington/img/Overlays-02.png")

htmlContainer.append("img")
.attr('id','iimage2')
.attr('class','zoom')
   .attr("src","/static/washington/img/Overlays-03.png")

htmlContainer.append("img")
.attr('id','iimage3')
.attr('class','zoom')
   .attr("src","/static/washington/img/Overlays-04.png")

htmlContainer.append("img")
.attr('id','iimage4')
.attr('class','zoom')
   .attr("src","/static/washington/img/MapOverlay-01.png")

var svgContainer = d3.select("body").append("svg")
                                    .attr("width", window.innerWidth)
                                    .attr("height", window.innerHeight)
                                    .attr("id","pad")
                                    .attr("viewBox","0 0 2048 1536")    

svgContainer.append("image")
   .attr('width', 2048)
   .attr('height', 1536)
   .attr("xlink:href","/static/washington/img/LabledMap-01.png")

 svgContainer.append("image")
        .attr("id","complete")
        .attr('width', 141)
        .attr('height', 133)
        .attr("x",210)
        .attr("y",1370)
        .attr("xlink:href","/static/washington/img/backarrow-06.png")


  svgContainer.append("image")
        .attr("id","help")
        .attr('width', 141)
        .attr('height', 133)
        .attr("x",40)
        .attr("y",1370)
        .attr("xlink:href","/static/washington/img/info_button.png")

 svgContainer.append("rect")
    .attr('class',"help")
    .style("fill","red")
    .attr('width', 141)
        .attr('height', 133)
        .attr("x",40)
        .attr("y",1370)
    .attr("opacity",".01")  

svgContainer.append("circle")
        .attr("id","image1")
         .attr("cx",744)
         .attr("cy",408)
         .attr("r",123)
         .style("fill","white").style("opacity",".01")

svgContainer.append("circle")
        .attr("id","image2")
         .attr("cx",1044)
         .attr("cy",1164)
         .attr("r",123)
         .style("fill","white").style("opacity",".01")

svgContainer.append("circle")
        .attr("id","image3")
         .attr("cx",1139)
         .attr("cy",708)
          .attr("r",123)
         .style("fill","white").style("opacity",".01")




d3.xml("/static/washington/data/blank.svg", "image/svg+xml", function(xml) {
   document.getElementById("pad").appendChild(xml.documentElement);
})  


$(document).ready(function() {



$("#complete").on("click touchstart",function(e){   e.preventDefault();
var ifr = parent.document.getElementById("location");
$(ifr).hide();
})

$(".zoom").on("click touchstart",function(e){   e.preventDefault();
$(this).fadeOut();
d3.select("#pad").transition().attr("viewBox","0 0 2048 1536")
})

$(".prompt").on("click touchstart",function(e){ e.preventDefault();
$(this).fadeOut();
d3.select("#pad").transition().attr("viewBox","0 0 2048 1536")
})

$(".zoom").hide();


$("#image1").on("click touchstart",function(e){ e.preventDefault();
//d3.select("#pad").transition().attr("viewBox","450 200 400 375")
$("#iimage1").delay('200').fadeIn()
})

$("#image2").on("click touchstart",function(e){ e.preventDefault();
//d3.select("#pad").transition().attr("viewBox","800 1000 400 375")
$("#iimage2").delay('200').fadeIn()
})

$("#image3").on("click touchstart",function(e){ e.preventDefault();
//d3.select("#pad").transition().attr("viewBox","900 550 400 375")
$("#iimage3").delay('200').fadeIn()
})

$(".help").on("click touchstart",function(e){   e.preventDefault();
$("#iimage4").delay('200').fadeIn()
})

})  



</script>

</body>

Answer 1

您应该使用$.get()功能来执行此操作：

if (locationClick == 0){
complete = ++complete
locationClick = ++locationClick
checkComplete(complete/4)
}
console.log(complete/4)
$.get('/leadership/location/', function(data) {
$('#location').htm(data);
$("#location").show();
});
})

此外，在烧瓶的蓝图中，您可以通过将 url_prefix 添加到您的蓝图实例中来反复写入相同的前缀，如下所示：

leadership_app = Blueprint('leadership_app', __name__, url_prefix='/leadership', template_folder='templates')

如何在javascript中与Python路由交互？

1 个答案: