let headers = { "Content-Type": "application/json" } 怎么获取 Content-Type 的值?
时间: 2023-11-22 18:05:41 浏览: 34
可以使用 headers 对象的属性访问方式来获取 Content-Type 的值,例如:
```javascript
console.log(headers["Content-Type"]); // 输出 "application/json"
```
或者使用点号(.)来访问:
```javascript
console.log(headers.Content-Type); // 报错,因为 Content-Type 包含了特殊字符,需要使用引号或方括号访问
```
但是由于 Content-Type 含有特殊字符 "-", 所以需要使用方括号([])的方式进行访问:
```javascript
console.log(headers["Content-Type"]); // 输出 "application/json"
```
相关问题
请修改我这段代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div id="app"> <el-button type="primary" @click="addRequest">添加</el-button> <el-input v-model="username" placeholder="请输入内容"></el-input> <el-input v-model="password" placeholder="请输入内容"></el-input> </div> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.0/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> let MyVue = new Vue({ el: '#app', data() { return { username: "114514", password: "114514", } }, methods: { addRequest: () => { $.ajax({ url: http://localhost:8080/hello, // method: "POST", contentType: 'application/x-www-form-urlencoded', // data:{ // username:MyVue.username, // password:MyVue.password // }, success: (res) => { console.log(JSON.parse(res)); } }) } } }) </script> </body> </html>使得ajax获取response headers中的cookies
好的,根据您的需求,我对代码进行了修改,并添加了获取响应头中的 Cookies 的代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<el-button type="primary" @click="addRequest">添加</el-button>
<el-input v-model="username" placeholder="请输入内容"></el-input>
<el-input v-model="password" placeholder="请输入内容"></el-input>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.0/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
let MyVue = new Vue({
el: '#app',
data() {
return {
username: "114514",
password: "114514",
}
},
methods: {
addRequest: function() {
$.ajax({
url: "http://localhost:8080/hello",
type: "POST",
contentType: 'application/x-www-form-urlencoded',
xhrFields: {
withCredentials: true // 允许发送和接收 cookie
},
success: function(res, status, xhr) {
console.log(JSON.parse(res));
console.log(xhr.getResponseHeader('Set-Cookie')); // 获取响应头中的 Cookies
},
error: function(xhr, status, error) {
console.log(error);
}
})
}
}
})
</script>
</body>
</html>
```
需要注意的是,此方法只适用于在同一域名下的请求。如果您需要跨域获取 Cookies,需要在服务器端设置相关的 CORS 配置。另外,由于您的代码中使用了箭头函数,我将其改为了普通函数,以避免出现 this 指向错误的问题。
fetch_data(json_data: any) { let self = this let ctrl = new AbortController() // console.log('ctrl', ctrl) fetchEventSource('http://10.110.133.8/apiv2/videomgr/query', { method: 'POST', signal: ctrl.signal, headers: { 'Content-Type': 'application/json', accept: 'text/event-stream' }, body: JSON.stringify(json_data), async onmessage(event: EventSourceMessage) { console.log('event', event) if (event.data === '') return self.list.push({ name: 'xs', msg: event.data }) }, async onopen(response: any) { // 开始 console.log('rerere', response) } }) }
这段代码是一个使用fetch函数发送POST请求并获取数据的函数。它使用Fetch API来发送异步请求,并通过EventSource对象来监听服务器推送的事件。
首先,它创建了一个AbortController对象`ctrl`,用于中止请求。
然后,它使用fetch函数发送POST请求到指定的URL `'http://10.110.133.8/apiv2/videomgr/query'`。请求的方法为POST,请求头包含了Content-Type为application/json和accept为text/event-stream。
请求的主体是通过JSON.stringify方法将json_data对象转换为JSON字符串。
同时,它设置了两个事件处理程序:
1. onmessage事件处理程序用于监听服务器推送的消息。当接收到消息时,将消息作为新的对象添加到self.list数组中。
2. onopen事件处理程序用于在连接打开时进行一些操作。在这里,它会打印出response对象。
整体来说,这段代码使用Fetch API发送POST请求,并监听服务器推送的消息和连接打开事件。在收到消息时,将其添加到列表中。