如何不使用request.form将HTML输入值转为URL路径参数传给Flask端点？

To achieve your goal of having the summoner name embedded in the URL path (like /summoner/your-search-term) without relying on request.form, we’ll adjust both your HTML form (with a touch of JavaScript to dynamically build the action URL) and your Flask endpoint. Here’s a step-by-step breakdown:

Step 1: Update the Flask Endpoint #

Instead of listening for POST requests to /summoner, create a route that captures the summoner name as a URL parameter. While POST works, using GET is more semantically correct for search operations (since you’re retrieving data). We’ll include both options below:

Option 1: Using GET (Recommended for Search) #

@server.route("/summoner/<summoner_name>", methods=["GET"])
def getSummonerInformation(summoner_name):
    # Use summoner_name directly from the URL path
    return summoner_name

Option 2: Using POST (As Per Your Request) #

If you specifically need to use POST (though less common for search), the route structure stays nearly identical—just adjust the method:

@server.route("/summoner/<summoner_name>", methods=["POST"])
def getSummonerInformation(summoner_name):
    return summoner_name

Step 2: Modify the HTML Form #

Native HTML can’t dynamically set the action attribute to include input values, so we’ll add a JavaScript function to update the form’s target URL when the user submits it. This ensures the summoner name is appended to the path properly:

<form id="summonerForm" method="GET"> <!-- Switch to POST if using Option 2 -->
    <input id="summonerSearched" name="summoner" type="text" placeholder="Enter summoner name">
    <button type="submit">Search</button>
</form>

<script>
document.getElementById('summonerForm').addEventListener('submit', function(e) {
    e.preventDefault(); // Stop default form submission
    const summonerName = document.getElementById('summonerSearched').value.trim();
    
    if (summonerName) {
        // For GET requests: Redirect to the dynamic URL
        window.location.href = `/summoner/${encodeURIComponent(summonerName)}`;
        
        // For POST requests (uncomment if using Option 2):
        // const dynamicForm = document.createElement('form');
        // dynamicForm.method = 'POST';
        // dynamicForm.action = `/summoner/${encodeURIComponent(summonerName)}`;
        // document.body.appendChild(dynamicForm);
        // dynamicForm.submit();
    }
});
</script>

Key Details: #

• encodeURIComponent() ensures special characters (like spaces or symbols) in the summoner name are properly encoded for the URL, preventing errors.
• For GET requests, using window.location.href is simple and aligns with standard search behavior (users can bookmark the results URL).
• For POST requests, you need to create a dynamic form and submit it, since you can’t directly redirect with POST via window.location.

Why This Works: #

The JavaScript captures the input value when the user clicks "Search", builds the correct URL path, and either redirects (for GET) or submits a dynamic form (for POST). The Flask endpoint now receives the summoner name directly from the URL path, so you no longer need to use request.form.

内容的提问来源于stack exchange，提问作者David Pham