var nameTemp ="" //获取姓名 const data = new FormData(); const xhr = new XMLHttpRequest(); data.append("account",temp.user); xhr.withCredentials = true; xhr.addEventListener("readystatechange", function () { if (this.readyState === this.DONE) { nameTemp=this.responseText } }); xhr.open("POST", "http://localhost:8080/user/getName"); xhr.send(data);用上述方式写一个JavaScript函数返回姓名nameTemp
时间: 2023-06-14 07:06:10 浏览: 64
你可以这样编写JavaScript函数:
```
function getName() {
var nameTemp = "";
const data = new FormData();
data.append("account", temp.user);
const xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function() {
if (this.readyState === this.DONE) {
nameTemp = this.responseText;
}
});
xhr.open("POST", "http://localhost:8080/user/getName");
xhr.send(data);
return nameTemp;
}
```
请注意,由于XHR是异步的,因此无法保证在函数返回之前获取到响应。因此,在调用 `getName()` 函数之后,需要等待XHR响应之后才能使用 `nameTemp` 变量。
相关问题
// HTML<input type="file" id="fileUpload" />// JavaScriptconst fileInput = document.getElementById('fileUpload');fileInput.addEventListener('change', function() { const file = fileInput.files[0]; // 创建FormData对象 const formData = new FormData(); formData.append('file', file); // 发送异步请求 const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.onload = function() { if (xhr.status === 200) { console.log('上传成功'); } else { console.log('上传失败'); } }; xhr.send(formData);});
这段代码是用于实现前端上传文件的功能,主要是通过HTML的input元素和JavaScript的XMLHttpRequest对象实现的。首先,HTML代码中定义了一个type为file的input元素,用于选择要上传的文件。然后,JavaScript代码中使用addEventListener方法给input元素添加了一个change事件监听器,当用户选择文件后触发该事件。在事件处理函数中,首先获取用户选择的文件,然后创建一个FormData对象,将文件添加到FormData中,最后通过XMLHttpRequest对象发送一个POST请求,将FormData作为请求体发送到服务器端。当服务器端返回响应后,通过XMLHttpRequest对象的onload事件处理函数进行处理,如果响应状态码为200,则上传成功,否则上传失败。
router.post('/postForm',(req,res) => { const query = req.body console.log(query) res.send(query) }) 结果为空 //2.post请求传递参数(form) function postForm(){ const xhr = new XMLHttpRequest() xhr.open("post","postForm") const infoE1 = document.querySelector("#info") const form = new FormData(infoE1) form.append("height",1.88) xhr.send(form) }
根据您提供的代码,可能出现问题的地方有以下几点:
1. 在使用 `FormData` 构造函数时,需要传入一个表单元素作为参数。但是,您的代码中使用了 `document.querySelector("#info")` 来获取表单元素,这样获取到的只是一个普通的 DOM 元素,并不是表单元素。应该使用 `document.querySelector("form")` 来获取表单元素。
2. 在发送请求时,需要将 `Content-Type` 设置为 `application/x-www-form-urlencoded` 或 `multipart/form-data`。默认情况下,`XMLHttpRequest` 对象会将 `Content-Type` 设置为 `application/json`。可以使用 `xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");` 来设置 `Content-Type`。
3. 如果您使用 Express 框架,需要使用 `body-parser` 模块来解析 POST 请求体中的数据。可以像下面这样使用:
```javascript
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
```
因此,建议您按照以下方式修改代码:
```javascript
// 1. 修改路由
router.post('/postForm', (req, res) => {
const query = req.body;
console.log(query);
res.send(query);
});
// 2. 修改发送请求的函数
function postForm() {
const xhr = new XMLHttpRequest();
xhr.open("post", "postForm");
const form = new FormData(document.querySelector("form"));
form.append("height", 1.88);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(form);
}
```
另外,如果您仍然无法得到正确的结果,可以在浏览器的开发者工具中查看请求和响应的详细信息,以便找出问题所在。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)