Upon successfully making an ajax call by clicking the submit button, I am encountering the following error page in my browser with no visible errors in the console:
This page isn't working If the problem continues, contact the site owner. HTTP ERROR 405
I'm relatively new to javascript, jquery, and ajax calls so any suggestions on how to resolve this error would be greatly appreciated.
Here's a snippet of the HTML code being used:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css" />
<title>Document</title>
</head>
<body>
<div>
<h1 class="myclass">HELLO! WELCOME</h1>
</div>
<div id="maindiv">
<form id="loginform" method="post">
<div class="form-group">
<input type="number" class="form-control" id="inputphone" placeholder="Enter phone number">
</div>
<div class="form-group">
<input type="password" class="form-control" id="inputpassword" placeholder="Enter Password">
</div>
<div class="forgot-password">
<a href="">Forgot password</a>
</div>
<button id="submit" class="submit-button" >Submit</button>
<!-- <input type="submit"value="Login"/>-->
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/index.js" type="text/javascript"> </script>
</body></html>
And here's a look at the JS code that accompanies it:
$('#submit').click(function () {
alert(".click() called.");
var inputphoneno = document.getElementById("inputphone").value;
var inputpassword = document.getElementById("inputpassword").value;
const jdata = {
"phonenumber": inputphoneno,
"password": inputpassword
};
try {
$.ajax({
type: "POST",
url: "http://localhost:8085/Smatr/signIn",
data: JSON.stringify(jdata),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
console.log(data)
alert(data);
}
});
}
catch (ex) {
alert(ex);
}
});