0
232
ViewsLa solicitud GET se envía dos veces; Una vez con la cadena de consulta dentro de la URL y otra vez sin ella
Mi problema es que cada vez que se hace clic en el botón const loadOldPlayer , envía dos solicitudes GET, como se muestra en la siguiente captura de pantalla. Lo que esto da como resultado es que se representa la plantilla incorrecta ( showsPlayer.html debería ser lo que se representa, pero en su lugar solo representa playerView.html ). No puedo entender por qué sucede esto, por lo que se agradece cualquier ayuda. Debajo de la captura de pantalla está mi código. 
let playerName const loadOldPlayer = document.getElementById('playerLoader'); const enterProfile = (usedToLoad) => { console.log(playerName) if (usedToLoad) { playerName = document.getElementById('loadPlayerName').value }; const playerData = { playerName: playerName }; const JSONdata = JSON.stringify(playerData); fetch(`/profile?tags=${JSONdata}`, { method: "GET" }).then((response) => { if (response.ok) { document.getElementById('loaderLabel').innerHTML = "Loading Player" } else { alert("Something bad happened."); }; }); }; loadOldPlayer.addEventListener("click", enterProfile.bind(true)); from flask import Flask, render_template, request from static.SNEKfiles import SpaceShipGame import json game_app = Flask(__name__) @game_app.route('/') @game_app.route('/home') def home(): return render_template("HTMLPage1.html") @game_app.route('/profile', methods=['GET']) def profile(): if request.method == 'GET': playerName = request.args.get('tags') if playerName != None: print("got the name") return render_template("showsPlayer.html") else: print("here is issue") return render_template("playerView.html") if __name__== "__main__": game_app.run(debug=True, host='127.0.0.1', port=7777)Sí, mis archivos HTML tienen un nombre incorrecto, probablemente lo solucionaré. Finalmente.
2 answers
Answer question0
No tengo experiencia con esto, así que podría estar completamente equivocado aquí. De todos modos, intente agregar el detector de eventos con
loadOldPlayer.addEventListener("click", function() { enterProfile(true); });en vez de
loadOldPlayer.addEventListener("click", enterProfile.bind(true));Creo que el enlace (verdadero) podría estar causando la cadena de consulta vacía. Si esto no funciona, ¿podría agregar alguna salida de depuración?
Además, return render_template("showsPlayer.html") devuelve con éxito el html, pero el cliente nunca lo usa. Intenta usar
fetch(`/profile?tags=${JSONdata}`, { method: "GET" }).then((response) => { if (response.ok) { document.getElementById('loaderLabel').innerHTML = "Loading Player" return response.text() } else { alert("Something bad happened."); } }).then((html) => { console.log(html) // should show response html document.open(); document.write(html); // writes response html to body document.close(); })Document.write() se considera una mala práctica, pero es la única forma (que yo sepa, al menos) de reemplazar dinámicamente toda la página.
0
Edité esta respuesta porque no noté su uso de .bind(true) antes.
El detector de eventos espera una referencia de función, que es lo que Quackers hizo que implementaras. Similar a la solución Quackers, pero usando la forma de función de flecha más corta:
loadOldPlayer.addEventListener("click", () => enterProfile(true));De esa manera, está pasando una referencia de función, y esa función, cuando la llama el evento, simplemente llame a su función con el valor establecido en "verdadero" como espera.
Su código original estaba usando .bind() que crea una nueva función con this conjunto al valor que proporcionó a .bind . Consulte https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind .
Al pasar enterProfile.bind(true) a addEventListener , terminó pasando una nueva función enterProfile para manejar el evento de clic (esa nueva función tiene this establecido en true , lo que no tuvo ningún efecto para usted).
Cuando se disparó el evento, el navegador en realidad estaba pasando el objeto Evento a la función, no el valor true (consulte las devoluciones de llamadas de eventos https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#the_event_listener_callback ).
En ese momento, el if (usedToLoad) dependía completamente de los datos del evento que se pasaban y si se evaluaba como un valor real o no.