用bootstrap4和jq 写一个请求失败,提示服务端错误消息
时间: 2024-02-17 15:01:37 浏览: 35
如果你想使用 jQuery 和 Bootstrap 4 来实现请求失败时提示服务端错误消息,可以参考以下代码:
```html
<!-- HTML 代码 -->
<div class="alert alert-danger d-none" role="alert" id="request-failed">
请求失败!<span id="error-message"></span>
</div>
```
```javascript
// jQuery 代码
$.ajax({
url: 'your-api-url',
type: 'POST',
dataType: 'json',
data: { /* 请求参数 */ },
success: function(response) {
// 请求成功的处理逻辑
},
error: function(xhr, status, error) {
// 请求失败的处理逻辑
$('#error-message').text(xhr.responseText); // 显示服务端返回的错误消息
$('#request-failed').removeClass('d-none'); // 显示错误提示
}
});
```
在这个示例中,我们首先定义了一个 `alert` 组件,并且给它设置了一个 `id` 属性为 `request-failed`。我们还在这个组件中定义了一个 `span` 元素,并且给它设置了一个 `id` 属性为 `error-message`,用来显示服务端返回的错误消息。然后,在 jQuery 的 `$.ajax()` 方法中,我们监听了请求失败的事件,并且使用 `text()` 方法将服务端返回的错误消息显示到 `error-message` 元素中。最后,我们使用 `removeClass()` 方法来显示这个错误提示。你可以根据需要调整提示信息的样式、颜色等属性。