I'm trying to communicate my .html client with a REST service I created in ASP.NET C #. At first it was just to login and if the login and password was correct it redirected to the home page of my application. The problem is the following my AJAX call is only running successfully when debugging the .js in the browser, if the opposite is as if it had no action bound to the button. Here is the code:
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#2196f3">
<title>login</title>
<link rel="stylesheet" href="dist/css/framework7.material.min.css">
<link rel="stylesheet" href="dist/css/framework7.material.colors.min.css">
<link rel="stylesheet" href="dist/css/my-app.css">
</head>
<body>
<!-- Views -->
<div class="views">
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<div data-page="index" class="page">
<center><br><br><br><img src="img/logo_plantao_card.png"></center>
<!-- Login -->
<form name= "dados">
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
<div class="label cartao"><b>Cartão</b></div>
<div class="item-input">
<input type="text" name="txt_cartao" id="txt_cartao" placeholder="Numero do Cartão"></input>
</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="label cartao"><b>Senha</b></div>
<div class="item-input">
<input type="password" name="txt_senha" id="txt_senha" placeholder="Senha"></input>
</div>
</div>
</li>
</ul>
</div>
<p class="button-rows">
<input type="submit" id="btnEntrar" class="button button-big button-fill color-blue " value="Entrar" onclick="verifica_cartao()"></input>
</p>
</form>
<!-- Roda pé-->
<div class="rodape">
Copyright © 2016 BTI - Todos os direitos reservados
</div>
</div>
</div>
</div>
<script type="text/javascript" src="dist/js/framework7.min.js"></script>
<script type="text/javascript" src="dist/js/my-app.js"></script>
<!-- <script src="https://code.jquery.com/jquery-2.2.1.min.js"integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="crossorigin="anonymous">
</script> -->
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).on("click", "#btnEntrar", function(evt)
{
$.ajax({
type: "POST",
url: "http://localhost:13383/api/cartao",
success: function (data) {
//window.open('home.html');
alert('ola');
}
});
});
</script>
</body>
</html>
Other attempt
$(document).on("click", "#btnEntrar", function(evt){
// $.ajax({
// type: "POST",
// url: "http://localhost:3687/api/cartao",
// data: {
// CodImp: '6064213000000001',
// senha: '1234'
// },
// dataType: "json",
// success: function (data) {
// alert("ola");
// },
// error: function (data) {
// alert("erro");
// //alert("Não foi possivel se conectar ");
// }
// });
// });
$.ajax({
type: "POST",
url: "http://localhost:3687/api/cartao",
dataType: "json",
data: {
CodImp: '6064213000000001',
senha: '1234'
},
success: function (data) {
alert("ola");
},
error: function(data){
alert("erro");
}
});
});