填写表单时，如何发送获取请求？
填写表单时，如何发送获取请求？
提问于 2020-01-15 21:57:32
我正在尝试与API进行通信。我首先请求一个令牌，然后存储它。在它被存储之后，用户被告知填写一个表单并点击submit，这将获取一个post请求。我现在的问题是，请求是在页面加载而不是提交时发送的。这是我到目前为止所拥有的。
联署材料：
var cred = { email: "xxxxx@xxxx.xxx", password: "xxxxx" };
var credJSON = JSON.stringify(cred);
fetch('https://app.bl.ink/api/v3/access_token', {
method: 'POST',
body: credJSON,
headers: {
'Content-Type': 'application/json'
}
}).then(function (resp) {
return resp.json();
}).then(function (data) {
var blink_token = data.access_token ;
var linkInfo = { url: document.getElementById('url').value, alias: document.getElementById('alias').value };
var linkInfoJSON = JSON.stringify(linkInfo);
fetch('https://app.bl.ink/api/v3/2070/links', {
method: 'POST',
body: linkInfoJSON,
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + blink_token
}
}).then(function (resp) {
return resp.json();
}).then(function (data) {
console.log(data);
})
}).catch(function (err) {
console.log('something went wrong', err);
});HTML
<form>
Desired Long URL:<br>
<input type="text" name="url" id="url">
Desired Short URL:<br>
<input type="text" name="alias" id="alias"><br>
<input type="submit" value="Submit">
</form>
</body>回答 2
Stack Overflow用户
回答已采纳
发布于 2020-01-15 22:07:31
您可以在窗体上添加一个submit事件侦听器，并在处理程序函数中发出获取请求。
var cred = { email: "xxxxx@xxxx.xxx", password: "xxxxx" };
var credJSON = JSON.stringify(cred);
document.querySelector('form').addEventListener('submit', fetchRequest);
function fetchRequest(event) {
event.preventDefault(); // as Mr. Jojo rightly pointed out (thanks to him)
fetch('https://app.bl.ink/api/v3/access_token', {
method: 'POST',
body: credJSON,
headers: {
'Content-Type': 'application/json'
}
}).then(function (resp) {
return resp.json();
}).then(function (data) {
var blink_token = data.access_token ;
var linkInfo = { url: document.getElementById('url').value, alias: document.getElementById('alias').value };
var linkInfoJSON = JSON.stringify(linkInfo);
fetch('https://app.bl.ink/api/v3/2070/links', {
method: 'POST',
body: linkInfoJSON,
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + blink_token
}
}).then(function (resp) {
return resp.json();
}).then(function (data) {
console.log(data);
})
}).catch(function (err) {
console.log('something went wrong', err);
})
}Stack Overflow用户
发布于 2020-01-15 22:26:20
我认为您的问题是提交表单，即重新加载页面。
在代码中，如下所示：
<form id="my-form">
Desired Long URL:<br>
<input type="text" name="url" >
Desired Short URL:<br>
<input type="text" name="alias" ><br>
<button type="submit" >Submit </button>
</form> const myForm = document.getElementById('my-form');
myForm.onsubmit = evt => {
evt.preventDefault(); // disable page reload
data = {
url: myForm.url.value,
alias: myForm.alias.value
};
...
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59760144
复制相关文章
相似问题
腾讯云开发者
