JavaScript函数发送带参数GET请求至Python Flask应用失败求助

你遇到的问题核心是XMLHttpRequest的open()方法使用错误——第三个参数并不是用来传递URL查询参数的，它实际上是控制请求是否异步的布尔值（默认是true）。所以你的参数根本没有被拼接到URL上，导致请求不带参数失败。

下面给你两种可行的解决方式：

方式1：手动拼接URL查询参数 #

直接把参数拼接到请求URL后面，格式和你手动输入的一样：

function sendRequest() { 
    // 假设rank和topic是已定义的变量
    const url = `/books?rank=${rank}&topic=${encodeURIComponent(topic)}`;
    const xhr = new XMLHttpRequest(); 
    xhr.open('GET', url); 
    xhr.onload = function() { 
        console.log(xhr.response); 
    } 
    xhr.send(); 
}

注意这里用encodeURIComponent()处理topic这类可能包含特殊字符的参数，避免URL解析出错。

方式2：使用URLSearchParams自动处理参数（更推荐） #

现代浏览器支持URLSearchParams API，它能帮你自动拼接和编码参数，更简洁可靠：

function sendRequest() { 
    const params = new URLSearchParams({
        rank: rank,
        topic: topic
    });
    const url = `/books?${params}`;
    const xhr = new XMLHttpRequest(); 
    xhr.open('GET', url); 
    xhr.onload = function() { 
        console.log(xhr.response); 
    } 
    xhr.send(); 
}

这种方式不需要手动处理编码，尤其适合参数较多的场景，不容易出错。

另外，如果你后续考虑用更现代的API，也可以试试fetch，写法会更简洁：

async function sendRequest() {
    const params = new URLSearchParams({ rank, topic });
    const response = await fetch(`/books?${params}`);
    const html = await response.text();
    console.log(html);
}

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