利用JavaScript调用后端API

利用JavaScript调用后端API

假设我们已经在HTML页面上创建了基础的界面来获取用户输入，我们现在需要编写JavaScript代码来调用后端API。以下是一些示例函数，展示了如何做到这一点：

// 请输入你的API服务地址，下面默认为localhost:8080
const API_BASE_URL = "http://localhost:8080";

// 创建用户 API
function createUser(username) {
    fetch(API_BASE_URL + "/createUser", {
        method: "POST", 
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ "username": username }), 
    })
    .then(response => response.json())
    .then(data => alert("User created: " + data.userId))
    .catch((error) => console.error('Error:', error));
}

// 创建帖子 API
function createPost(userId, content) {
    fetch(API_BASE_URL + "/createPost", {
        method: "POST", 
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ "userId": userId, "content": content}), 
    })
    .then(response => response.json())
    .then(data => alert("Post created: " + data.postId))
    .catch((error) => console.error('Error:', error));
}

// 获取用户帖子 API
function getUserPosts(userId) {
    fetch(API_BASE_URL + "/getUserPosts/" + userId)
    .then(response => response.json())
    .then(data => {
        data.posts.forEach(post => alert("Post content: " + post.content));
    })
    .catch((error) => console.error('Error:', error));
}

// 添加更多函数来调用其他API...

上面的例子中，我们使用JavaScript的 fetch 函数发送HTTP请求。这个函数接收两个参数：一个是URL，另一个是一个包含配置信息的对象，比如：请求的方法 (GET,POST, 等等)，请求头（可以设置包含 'Content-Type: application/json' 等的对象），以及请求体（可以用 JSON.stringify(data) 来包裹你的数据）。

当接收到响应时，你可以用 .then() 来处理结果，或者用 .catch() 来处理错误。

注意：在浏览器中直接打开HTML文件会触发跨域请求安全策略（CORS），在这种情况下，上述请求可能会被视为跨站请求并被阻止。你应该在真正的web服务器环境下部署你的HTML文件，或者在你的后端设置适当的CORS策略。

以上就是如何通过JavaScript调用后端API的示例。这只是基本示例，实际的代码可能需要根据你的特定API和安全需求进行修改和扩展。希望这个例子对你有所帮助！