Não consigo obeter retorno do webservice REST

.NET

Front-end

21/03/2016

Estou tentando uma comunicação do meu cliente .html com um serviço REST que criei em ASP.NET C#. A princípio era apenas para fazer login e caso o login e senha estivesse correto redirecionava para a pagina home da minha aplicação. O problema é o seguinte minha chamada AJAX só está executando com sucesso quando debudo o .js no navegador, caso o contrário é como se não tivesse ação nenhuma vinculada ao botão. Segue o código : 

<!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>


Não sei por qual motivo ele nem entra na propriedade sucess do ajax ???? Me ajudem por favor.
Sidnei Junior

Sidnei Junior

Curtidas 0

Melhor post

Randrade

Randrade

29/03/2016

Eu não cheguei a ver o seu back-end, mas tem uma coisa errada em sua página.

Bom, o seu botão enviar está dentro de um form, e o botão está com o tipo submit. Quando está assim, ele executa o POST do form, e não o que está no "click" de sua página. Uma solução seria retirar o form, ou não deixar ele concluir.

Irei postar sua página sem o form e de outro Web Service para você testar.

<!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>

    
  </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="button" id="btnEntrar" class="button button-big button-fill color-blue " value="Entrar"></input>
                        </p>
                    </form>
                    <!-- Roda pé-->
                    <div class="rodape">
                    Copyright © 2016 BTI - Todos os direitos reservados
                    </div>
                </div>
            </div>
        </div>

    <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script> 
 
 
<script type="text/javascript">
 
$(document).on("click", "#btnEntrar", function(evt)
    {
      console.log('cliquei aqui');             
            $.ajax({
                type: "GET",
                //url: "http://localhost:13383/api/cartao",
                url: 'http://viacep.com.br/ws/01001000/json/',
                    success: function (data) {
                    //window.open('home.html');
                    //alert('ola');
                    console.log(data)
                }
            });
    });
 
</script>
</body>
</html>



Retirei alguns arquivos para evitar requisições com erro 404. Mas aí você pode adicionar normalmente.
GOSTEI 1

Mais Respostas

William

William

21/03/2016

Qual tipo de retorno está sendo enviado pelo seu WebService, JSON?

Se for acrescente na requisição AJAX 'dataType: JSON'.
GOSTEI 0
Sidnei Junior

Sidnei Junior

21/03/2016

JSON

Fiz essas duas tentativa ... 
$(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");
		  } 
		  
		});
});


o back-end testando pelo postman , funciona perfeitamente, porem dentro da aplicação ajax sempre entra no erro
GOSTEI 0
Sidnei Junior

Sidnei Junior

21/03/2016

Para quem puder ajudar postei o código no github
https://github.com/sidneipsj/Aplicativo.PlantaoCard

dividi o projeto em frontend e backend
no frontend basicamente é só a página index.html que foi implementada. no backend criei uma pasta que contém apenas o controller que implementamos, mas também tem o projeto na integra.
GOSTEI 0
Sidnei Junior

Sidnei Junior

21/03/2016

Galera não consegui ainda será que alguém consegue dar um help?
GOSTEI 0
Sidnei Junior

Sidnei Junior

21/03/2016

algum pode ajudar ?
GOSTEI 0
Sidnei Junior

Sidnei Junior

21/03/2016

Pooooxa vlw Randrade era exatamente isto. mto obrigado mesmo faltou experiência aqui. rsrs
GOSTEI 0
POSTAR