ajax案例个人信息设置黑马

### 使用 Ajax 实现个人信息设置

#### 一、HTML 部分
创建一个简单的 HTML 表单用于输入用户的个人信息。

<form id="userForm">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username"><br><br>

    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email"><br><br>

    <button type="submit">保存</button>
</form>
<div id="message"></div>

#### 二、JavaScript (Ajax)部分
利用 XMLHttpRequest 或者更现代的方式如 `fetch` API 来发送异步请求更新服务器上的用户资料。这里采用 Axios 库来简化 HTTP 请求操作[^2]。

document.getElementById('userForm').addEventListener('submit', function(event){
    event.preventDefault(); //阻止表单默认提交行为
    
    const formData = {
        username: document.getElementById('username').value,
        email: document.getElementById('email').value
    };

    axios.post('/api/updateProfile', formData)
         .then(response => {
             if(response.data.success === true){
                 document.getElementById('message').innerHTML = '更新成功!';
             }else{
                 document.getElementById('message').innerHTML = response.data.message;
             }
         })
         .catch(error => {
            let errorMessage = '';
            if (error.response && error.response.data && error.response.data.errors) {
                Object.values(error.response.data.errors).forEach(val => {
                    errorMessage += val + '<br>';
                });
            } else {
                errorMessage = "网络异常";
            }

            document.getElementById('message').innerHTML = `<span style='color:red;'>${errorMessage}</span>`;
         });
});

上述代码展示了如何捕获表单提交事件，并通过 POST 请求向 `/api/updateProfile` 发送 JSON 数据，同时处理响应结果或可能发生的错误情况。如果服务端返回成功的状态，则显示一条正面的消息；如果有任何验证失败或其他类型的错误发生，则会提取这些信息并向用户提供反馈。

对于实际应用而言，还需要考虑更多细节，例如安全性措施（CSRF保护）、用户体验优化等。此外，在真实环境中应当遵循 RESTful 设计原则定义合适的路由路径和HTTP动词[^3]。