如何與JavaScript中的Python路由進行交互？

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位於template> leadership中

編輯：

感謝@Leandro Poblet，我現在正在使用$ .get（）函數，似乎可以看到路線，但似乎無法加載location.html。 我沒有收到任何錯誤，但是在chrome中使用開發人員工具，我可以看到GET方法卡在了“掛起”中，我嘗試刪除@login_required並確保所有嘗試的HTML文件$ .show（）具有要加載的網址，因此我知道那里沒有空隙。

在這一點上，我正在考慮可能是我嘗試加載的某些.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();
});
})

同樣，在flask的藍圖中，您可以通過向您的藍圖實例添加url_prefix來避免一遍又一遍地寫相同的前綴，如下所示：

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

如何與JavaScript中的Python路由進行交互？

問題描述

1 個解決方案

解決方案1
0 2014-12-09 19:03:33

如何與JavaScript中的Python路由進行交互？

問題描述

1 個解決方案

解決方案1 0 2014-12-09 19:03:33

解決方案1
0 2014-12-09 19:03:33