如何通过Javascript提交带有自定义变量的表单？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何通过Javascript提交带有自定义变量的表单？相关的知识，希望对你有一定的参考价值。
我有一个用于执行登录操作的表单。点击submit按钮时应该执行以下操作。
- 使用javascript与
firebase连接并验证用户身份。 - 获取当前用户的电子邮件。
- 通过
servlet将电子邮件提交给POST，就像点击submit按钮时提交的方式一样。
下面是代码
function toggleSignIn()
{
if (firebase.auth().currentUser)
{
// [START signout]
window.location.href = 'LoadSellPendingApprovals'
//firebase.auth().signOut();
// [END signout]
} else {
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
if (email.length < 4) {
alert('Please enter an email address.');
return;
}
if (password.length < 4) {
alert('Please enter a password.');
return;
}
// Sign in with email and pass.
// [START authwithemail]
firebase.auth().signInWithEmailAndPassword(email, password).then(function(firebaseUser)
{
var email = firebase.auth().currentUser.email;
alert(email);
window.location.href = 'LoadSellPendingApprovals'
})
.catch(function(error)
{
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// [START_EXCLUDE]
if (errorCode === 'auth/wrong-password')
{
alert('Wrong password.');
} else {
alert(errorMessage);
}
console.log(error);
document.getElementById('quickstart-sign-in').disabled = false;
// [END_EXCLUDE]
});
// [END authwithemail]
}
document.getElementById('quickstart-sign-in').disabled = true;
}
表格
<form id="login-form" class="form" action="" method="post">
<div class="form-group">
<input type="text" name="email" id="email" class="form-control login-input" placeholder="username">
</div>
<div class="form-group">
<input class="form-control login-input" type="password" placeholder="Password" id="password" name="password">
<i id="open" class="fa fa-eye fa-2x"></i>
<i id="closed" class="fa fa-eye-slash fa-2x"></i>
</div>
<div class="form-group">
<input type="submit" id="quickstart-sign-in" name="quickstart-sign-in" class="form-control btn btn-info btn-md login-bt" value="Login" onclick="toggleSignIn()">
</div>
<div class="form-group text-center forgot">
<a href="#">Forgot username</a> / <a href="#">password?</a>
</div>
</form>
我可以通过firebase验证用户身份，获取当前用户的电子邮件，但我无法通过POST将电子邮件提交给另一个servlet。我怎样才能做到这一点？
更新1
我根据@naga - elixir - jar更新了我的功能。下面是代码
function toggleSignIn()
{
if (firebase.auth().currentUser)
{
// [START signout]
//window.location.href = 'LoadSellPendingApprovals'
firebase.auth().signOut();
// [END signout]
} else {
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
if (email.length < 4) {
alert('Please enter an email address.');
return;
}
if (password.length < 4) {
alert('Please enter a password.');
return;
}
// Sign in with email and pass.
// [START authwithemail]
firebase.auth().signInWithEmailAndPassword(email, password).then(function(firebaseUser)
{
var email = firebase.auth().currentUser.email;
alert(email);
// console.log(email) contains email
const options = {
method: 'POST',
headers: {
// set appropriate headers, assuming json here
//"Content-Type": "application/json",
"Content-Type": "application/x-www-form-urlencoded"
},
// form body, assuming json
//body: JSON.stringify(email)
body: `email=${email}` <-- x-www-form-urlencoded form
}
alert(email);
// url = your url
fetch(url, options)
.then(response => response.json())
.then(data => console.log(data))
. catch(e => console.error(e))
window.location.href = 'LoadSellPendingApprovals'
})
.catch(function(error)
{
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// [START_EXCLUDE]
if (errorCode === 'auth/wrong-password')
{
alert('Wrong password.');
} else {
alert(errorMessage);
}
console.log(error);
document.getElementById('quickstart-sign-in').disabled = false;
// [END_EXCLUDE]
});
alert('hi');
// [END authwithemail]
}
document.getElementById('quickstart-sign-in').disabled = true;
}
现在我收到以下错误
ReferenceError: url is not defined
at (index):69
at e.g (promise.js:829)
at Dt (promise.js:1168)
at Rt (promise.js:1142)
at pt.t.Yb (promise.js:1113)
at dt (run.js:132)
对于有完整答案感兴趣的人，请参阅以下功能
function toggleSignIn()
{
if (firebase.auth().currentUser)
{
// [START signout]
//window.location.href = 'LoadSellPendingApprovals'
alert('existing user');
firebase.auth().signOut();
// [END signout]
} else {
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
if (email.length < 4) {
alert('Please enter an email address.');
return;
}
if (password.length < 4) {
alert('Please enter a password.');
return;
}
// Sign in with email and pass.
// [START authwithemail]
firebase.auth().signInWithEmailAndPassword(email, password).then(function(firebaseUser)
{
var email = firebase.auth().currentUser.email;
alert(email);
// console.log(email) contains email
const options = {
method: 'POST',
url: 'LoginValidator',
headers: {
// set appropriate headers, assuming json here
//"Content-Type": "application/json",
"Content-Type": "application/x-www-form-urlencoded"
},
// form body, assuming json
//body: JSON.stringify(email)
body: `email=${email}`
}
alert(email);
url = 'LoginValidator'
fetch(url, options)
.then(response => response.json())
.then(data => console.log(data))
. catch(e => console.error(e))
window.location.href = 'LoginValidator'
})
.catch(function(error)
{
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// [START_EXCLUDE]
if (errorCode === 'auth/wrong-password')
{
alert('Wrong password.');
} else {
alert(errorMessage);
}
console.log(error);
document.getElementById('quickstart-sign-in').disabled = false;
// [END_EXCLUDE]
});
alert('hi');
// [END authwithemail]
}
document.getElementById('quickstart-sign-in').disabled = true;
}
答案
你可以这样做：
在下面的代码中检索数据后，发送fetch POST：
firebase.auth().signInWithEmailAndPassword(email, password)
.then(function(firebaseUser) {
var email = firebase.auth().currentUser.email;
// console.log(email) contains email
const options = {
method: 'POST',
headers: {
// set appropriate headers, assuming json here
"Content-Type": "application/json",
// "Content-Type": "application/x-www-form-urlencoded"
},
// form body, assuming json
body: JSON.stringify({ email })
// body: `email=${email}` <-- x-www-form-urlencoded form
}
alert(email);
// url = your url
fetch(url, options)
.then(response => response.json())
.then(data => console.log(data))
.catch(e => console.error(e))
window.location.href = 'LoadSellPendingApprovals'
})
关于fetch API的更多信息
另一答案
您可以使用简单的AJAX调用将表单数据发布到任何服务器。有关如何使用AJAX POST数据的更多信息，请参阅以下链接。
如有任何其他问题，请告诉我。
以上是关于如何通过Javascript提交带有自定义变量的表单？的主要内容，如果未能解决你的问题，请参考以下文章
通过 JavaScript 访问 CSS 自定义属性（又名 CSS 变量）
如何使用 Javascript、jQuery 对提交按钮应用多个操作？