当前正在网站上工作，并且正在使用JavaScript。我在按钮上使用了addEventListener，以便当用户单击它时将用户输入数据发送到数据库。它可以在我的笔记本电脑上正常工作，但不能在我的手机上工作。在移动设备上单击该按钮时，它将刷新页面。
HTML
<div class="lg-devices">
<div class="container-fluid">
<div class="row">
<div class="col-lg-1 col-md-1" style="padding:0px;">
<div class="side-bar">
<div>
<i class="fas fa-cannabis"></i>
</div>
<div>
<i class="fas fa-user-friends"></i>
</div>
<div>
<i class="fas fa-crown"></i>
</div>
</div>
</div>
<div class="col-lg-10 col-md-11 col-sm-12 col-xs-12">
<div class="container main-content">
<div class="row justify-content-md-center">
<div class="col-lg-10 col-md-12 col-sm-12 col-xs-12">
<h3> <i class="fas fa-user-lock"></i> Change Password</h3>
<h6>You can change your password here</h6>
<div class="card add-more-box-shadow">
<div class="card-body">
<h4>Personal Information</h4>
<form>
<div class="form-row">
<div class="form-group col-md-12 col-lg-12 col-12">
<label for="inputEmail4">Old Password</label>
<input type="text" class="form-control" id="oldPassword" placeholder="Old Password">
</div>
<div class="form-group col-md-6 col-lg-6 col-12">
<label for="inputPassword4">New Password</label>
<input type="text" class="form-control" id="newPassword" placeholder="Last Name">
</div>
<div class="form-group col-md-6 col-lg-6 col-12">
<label for="inputPassword4">Confirm Password</label>
<input type="text" class="form-control" id="confirmPassword" placeholder="Confirm Password">
</div>
</div>
<button class="btn btn-primary" id="changePassword" style="width: 100%; height: 60px;">
Update <i class="fas fa-edit"></i>
<img src="includes/images/rolling.gif" />
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="small-devices">
<div class="row">
<div class="col-lg-10 col-md-11 col-sm-12 col-xs-12">
<div class="container main-content">
<div class="row justify-content-md-center">
<div class="col-lg-10 col-md-12 col-sm-12 col-xs-12">
<h3> <i class="fas fa-user-lock"></i> Change Password</h3>
<h6>You can change your password here</h6>
<div class="card add-more-box-shadow">
<div class="card-body">
<h4>Personal Information</h4>
<form>
<div class="form-row">
<div class="form-group col-md-12 col-lg-12 col-12">
<label for="inputEmail4">Old Password</label>
<input type="text" class="form-control" id="oldPassword" placeholder="Old Password">
</div>
<div class="form-group col-md-6 col-lg-6 col-12">
<label for="inputPassword4">New Password</label>
<input type="text" class="form-control" id="newPassword" placeholder="Last Name">
</div>
<div class="form-group col-md-6 col-lg-6 col-12">
<label for="inputPassword4">Confirm Password</label>
<input type="text" class="form-control" id="confirmPassword" placeholder="Confirm Password">
</div>
</div>
<button class="btn btn-primary" id="changePassword" style="width: 100%; height: 60px;">
Update <i class="fas fa-edit"></i>
<img src="includes/images/rolling.gif" />
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JAVASCRIPT
/* hide preloader */
$("#changePassword img").css({"display": "none"});
var changePassword = document.querySelector("#changePassword");
console.log(changePassword);
changePassword.addEventListener("click", function(evt){
evt.preventDefault();
/* show preloader */
$("#changePassword i").css({"display": "none"});
$("#changePassword img").css({"display": "inline"});
/* get the client data */
var voldPassword = document.querySelector("#oldPassword").value;
var vnewPassword = document.querySelector("#newPassword").value;
var vconfirmPassword = document.querySelector("#confirmPassword").value;
checkIfPasswordExist(voldPassword, vnewPassword, vconfirmPassword)
});
function checkIfPasswordExist(voldPassword, vnewPassword, vconfirmPassword){
/* Send all data to the server */
var request = $.ajax({
url: "clientJavascriptRequests.php",
method: "POST",
data: {
oldPassword: voldPassword,
functionName: 'checkIfPasswordExist'
},
contentType: 'application/x-www-form-urlencoded',
});
request.done(function( msg ) {
checkifUpdateIsSuccessful(msg)
});
request.fail(function( jqXHR, textStatus ) {
$.notify("Network error. Please Try again", "error");
});
function checkifUpdateIsSuccessful(msg){
if(msg === "confirmed"){
/* check if password match */
if(vnewPassword === vconfirmPassword){
/* send password to server function */
sendDataToServer(voldPassword, vnewPassword, vconfirmPassword)
}else{
setTimeout(function(){
$.notify("Password does not match", "error");
/* show icon */
$("#changePassword i").css({"display": "inline"});
$("#changePassword img").css({"display": "none"});
}, 3000);
}
}else{
setTimeout(function(){
$.notify("Password does not match our database", "error");
/* show icon */
$("#changePassword i").css({"display": "inline"});
$("#changePassword img").css({"display": "none"});
}, 3000);
}
}
}
function sendDataToServer(voldPassword, vnewPassword, vconfirmPassword){
/* Send all data to the server */
var request = $.ajax({
url: "clientJavascriptRequests.php",
method: "POST",
data: {
newPassword: vnewPassword,
functionName: 'changePassword'
},
contentType: 'application/x-www-form-urlencoded',
});
request.done(function( msg ) {
checkifUpdateIsSuccessful(msg)
});
request.fail(function( jqXHR, textStatus ) {
$.notify("Network error. Please Try again", "error");
});
function checkifUpdateIsSuccessful(msg){
if(msg === "done"){
setTimeout(function(){
$.notify("Update Successful", "success");
/* Clear inputs */
document.querySelector("#oldPassword").value = "";
document.querySelector("#newPassword").value = "";
document.querySelector("#confirmPassword").value= "";
/* show icon */
$("#changePassword i").css({"display": "inline"});
$("#changePassword img").css({"display": "none"});
}, 3000);
}else{
setTimeout(function(){
$.notify("error: " + msg, "error");
/* show icon */
$("#changePassword i").css({"display": "inline"});
$("#changePassword img").css({"display": "none"});
}, 3000);
}
}
}
我希望在网络和移动设备上都能获得相同的结果