如何在传递了参数数据的Ajax代码中添加查询？

在Ajax代码中添加查询参数，通常是在发送请求时通过URL传递参数。以下是一个使用原生JavaScript实现Ajax请求并在URL中添加查询参数的示例：

基础概念

Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。

类型与应用场景

GET请求：用于获取数据，适合查询操作。
POST请求：用于提交数据，适合创建或更新操作。

示例代码

以下是一个使用原生JavaScript发送GET请求并在URL中添加查询参数的示例：

function sendAjaxRequest(url, params) {
    // 构建查询字符串
    const queryString = Object.keys(params).map(key => 
        encodeURIComponent(key) + '=' + encodeURIComponent(params[key])
    ).join('&');

    // 完整的URL
    const fullUrl = url + '?' + queryString;

    // 创建XMLHttpRequest对象
    const xhr = new XMLHttpRequest();

    // 配置请求
    xhr.open('GET', fullUrl, true);

    // 设置回调函数
    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log('请求成功:', xhr.responseText);
        } else {
            console.error('请求失败:', xhr.statusText);
        }
    };

    // 发送请求
    xhr.send();
}

// 使用示例
const apiUrl = 'https://example.com/api/data';
const queryParams = {
    id: 123,
    name: 'John Doe'
};

sendAjaxRequest(apiUrl, queryParams);