GET request is Sent Twice; Once With the Query String Inside the URL and Once Without It-CodePudding

The

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)

Yes my HTML files are badly named, I'll probably get around to fixing that. Eventually.

CodePudding user response：

I'm inexperienced with this, so I might be completely wrong here. Anyway, try adding the event listener with

loadOldPlayer.addEventListener("click", function() { enterProfile(true); });

instead of

loadOldPlayer.addEventListener("click", enterProfile.bind(true));

I think the bind(true) might be causing the empty querystring. If this doesn't work, could you add some debug output?

Also, the return render_template("showsPlayer.html") successfully returns the html, but the client never actually uses it. Try using

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() is considered bad practice, but it is the only way (that I know of, at least) to dynamically replace the entire page.

CodePudding user response：

Hopefully I'm understanding what you are aiming to do correctly.

The event listener expects a function reference, but instead of providing the reference, you are calling the function with the value "true", which is likely why you are seeing additional, unexpected calls.

You could just wrap your function call in a dummy function declaration.

Ex.:

loadOldPlayer.addEventListener("click", () => enterProfile(true));

That way, you are passing a reference to the dummy function, which when called by the event will call your function with the value set to "true".