jquery - example - python ajax request
Raspberry Pi-Flask Server con JQuery no funciona sin conexión(funciona en línea) (1)
Intenta crear una carpeta estática que alojará todos tus js y otros archivos estáticos como a continuación:
static/
- js/
- css/
- ...
Ahora, coloque su archivo jquery en la carpeta js/ y use lo siguiente en su plantilla:
url_for(''static'', filename=''js/jquery-1.9.1.min.js'')
En tu plantilla, tendrás:
<script src="{{ url_for(''static'', filename=''js/jquery-1.9.1.min.js'') }}" type="text/javascript"></script>
Soy un principiante y tengo lo que debería ser un problema fácil de resolver. Sin embargo, después de investigar en muchos foros y probar la solución técnica, no pude hacer que el código funcione sin conexión, pero funciona bien cargando JQuery en línea. Déjame comenzar a explicar mi trabajo hasta ahora.
Utilicé Flask para crear una aplicación para poder manipular un robot de inspección mediante la aplicación para teléfono inteligente o el navegador (host local Raspberry). Escribí 2 códigos, el servidor Python y el cliente HTML. Funciona perfectamente bien en línea, obteniendo la biblioteca JQuery como sigue:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
Ahora quiero hacer que funcione sin conexión y probé muchas soluciones en otras preguntas en este sitio web, pero no pude hacerlo funcionar hasta el momento. Traté de descargar JQuery y colocarlo en la misma carpeta y hacer una referencia en el código sin éxito. Esto es lo que pensé que sería.
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
Me aseguré de poner el mismo nombre y carpeta, probada subcarpeta, con y sin el "/", pero nada está funcionando.
Por el momento, también estoy usando css en línea (para imágenes), pero intenté eliminarlo también mientras estaba probando JQuery sin conexión. Solo quiero que JQuery trabaje fuera de línea para poder terminar la página.
Una vez más, soy un novato, así que me disculpo y agradezco de antemano su ayuda.
Aquí está el archivo HTML completo que funciona muy bien en línea, tiene algo de portugués pero no importa ya que el problema es simplemente cargar Jquery localmente. De nuevo, gracias por la atención.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<style>
h3 {text-align: left;}
span {font-weight: bold;}
</style>
<script type=text/javascript>
$(
// Ao pressionamento de um botão, realizar um pedido ajax para o servidor realizando a determinada função
function()
{
$(''#frente'').click(function()
{
$.getJSON(''/_frente'');
});
$(''#re'').click(function()
{
$.getJSON(''/_re'');
});
$(''#esquerda'').click(function()
{
$.getJSON(''/_esquerda'');
});
$(''#direita'').click(function()
{
$.getJSON(''/_direita'');
});
$(''#verticalcima'').click(function()
{
$.getJSON(''/_verticalcima'');
});
$(''#verticalbaixo'').click(function()
{
$.getJSON(''/_verticalbaixo'');
});
$(''#posinit'').click(function()
{
$.getJSON(''/_posinit'');
});
$(''#azimuteesquerda'').click(function()
{
$.getJSON(''/_azimuteesquerda'');
});
$(''#azimutedireita'').click(function()
{
$.getJSON(''/_azimutedireita'');
});
$(''#d'').click(function()
{
$.getJSON(''/_distancia'', function(data)
{
$("#distaprox").text(data.distaprox);
});
});
}
);
</script>
<!-- Uma simples pagina JQuery Mobile para realizar o controle remoto do sistema robotico de inspeção -->
<body>
<div data-role="header">
<div><h3>ELMO CRSEA IFF</h3></div>
</div>
<div style="width:400px;;">
<form>
<div id="float1" style="width:200px;float:left;">
<p> Direcional:</p>
<p> 
<button type="button" name="frente" id="frente" style="font-size:40px"><i class="fa fa-arrow-up"></i></button>
</p>
<p> <button type="button" name="esquerda" id="esquerda" style="font-size:40px"><i class="fa fa-arrow-left"></i></button>
   
<button type="button" name="direita" id="direita" style="font-size:40px"><i class="fa fa-arrow-right"></i></button>
</p>
<p>
<button type="button" name="re" id="re" style="font-size:40px"><i class="fa fa-arrow-down"></i></button>
</p>
</div>
<div id="float2" style="200px;float:left;">
<p> Câmera:</p>
<button type="button" name="verticalcima" id="verticalcima" style="font-size:40px"><i class="fa fa-toggle-up"></i></button>
</p>
<button type="button" name="azimuteesquerda" id="azimuteesquerda" style="font-size:40px"><i class="fa fa-toggle-left"></i></button>
<button type="button" id="posinit" name="posinit" style="height:50px;width:50px;font-size:15px">Inicial<i</i></button>
<button type="button" name="azimutedireita" id="azimutedireita" style="font-size:40px"><i class="fa fa-toggle-right"></i></button>
</p>
<p>  
<button type="button" name="verticalbaixo" id="verticalbaixo" style="font-size:40px"><i class="fa fa-toggle-down"></i></button></p>
</div>
<p>
<button type="button" id="d" name="d" style="height:50px;width:50px;font-size:15px">Medir<i</i></button>
Distância aproximada = <span id="distaprox"></span>cm</p>
</form>
</div>
<footer>
<p><h3>Copyright 2016 IBL</h3></p>
</footer>
</body>
</html>